/**
 * CSS переменные - темы оформления
 * Автор: Каюмов А.Р., 2025
 */

:root {
  /* Цветовая палитра */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #818cf8;
  
  --success: #22c55e;
  --success-hover: #16a34a;
  
  --warning: #f59e0b;
  --warning-hover: #d97706;
  
  --danger: #ef4444;
  --danger-hover: #dc2626;
  
  --info: #3b82f6;
  --info-hover: #2563eb;

  /* Шрифты */
  --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;
  
  /* Размеры */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 68px;
  --header-height: 60px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-sm: 4px;
  
  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  
  /* Анимации */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Тёмная тема (по умолчанию) */
[data-theme="dark"], :root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #242424;
  --bg-hover: #2a2a2a;
  --bg-active: #333333;
  
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --text-muted: #525252;
  
  --border-color: #2a2a2a;
  --border-light: #333333;
  
  --card-bg: #1a1a1a;
  --card-hover: #242424;
  
  --input-bg: #242424;
  --input-border: #333333;
  --input-focus: var(--primary);
  
  --scrollbar-bg: #1a1a1a;
  --scrollbar-thumb: #404040;
  
  --overlay: rgba(0, 0, 0, 0.7);
}

/* Светлая тема */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  
  --card-bg: #ffffff;
  --card-hover: #f8fafc;
  
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-focus: var(--primary);
  
  --scrollbar-bg: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  
  --overlay: rgba(0, 0, 0, 0.5);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
}

/**
 * Базовые стили
 * Автор: Каюмов А.Р., 2025
 */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  min-height: 100vh;
}

/* Скроллбар */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Ссылки */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
}

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

/* Инпуты */
.input, .textarea, .select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Подсветка поля с ошибкой */
.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  animation: field-shake 0.4s ease-in-out;
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-muted);
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Форм группы */
.form-group {
  margin-bottom: 16px;
}

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

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.form-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}

/* Чекбокс */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

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

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Бейджи */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.badge-primary {
  background: var(--primary);
  color: white;
}

.badge-success {
  background: var(--success);
  color: white;
}

.badge-warning {
  background: var(--warning);
  color: white;
}

.badge-danger {
  background: var(--danger);
  color: white;
}

/* Аватар */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

img.avatar {
  border-radius: 50%;
  object-fit: cover;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

/* Утилиты */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

.hidden { display: none !important; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

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

.animate-fadeIn { animation: fadeIn var(--transition) forwards; }
.animate-slideUp { animation: slideUp var(--transition) forwards; }
.animate-slideDown { animation: slideDown var(--transition) forwards; }
.animate-scaleIn { animation: scaleIn var(--transition) forwards; }

/* Спиннер */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

/* Тосты */
#toast-root {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  animation: slideDown var(--transition) forwards;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--info); }

/* Лоадер страницы */
.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 9999;
}

/* Пустое состояние */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-text {
  color: var(--text-secondary);
  max-width: 400px;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  animation: scaleIn var(--transition-fast) forwards;
  transform-origin: top right;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.dropdown-item-danger {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* Контекстное меню */
.context-menu {
  position: fixed;
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  animation: scaleIn var(--transition-fast) forwards;
}

/* Цветовой пикер */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  border-color: var(--text-primary);
}

/**
 * Стили лейаута
 * Автор: Каюмов А.Р., 2025
 */

.layout {
  display: flex;
  min-height: 100vh;
}

/* Сайдбар */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  transition: width 0.3s ease, transform var(--transition);
}

/* Кнопка сворачивания */
.sidebar-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--primary);
  color: white;
}

.sidebar-toggle-icon {
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

/* Свёрнутое состояние сайдбара */
.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-title {
  display: none;
}

.sidebar-collapsed .sidebar-item-text,
.sidebar-collapsed .sidebar-section-title,
.sidebar-collapsed .sidebar-project-name,
.sidebar-collapsed .sidebar-project-count,
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-user-name,
.sidebar-collapsed .sidebar-user-role,
.sidebar-collapsed .sidebar-user-arrow,
.sidebar-collapsed .add-project-btn span:last-child {
  display: none !important;
}

.sidebar-collapsed .sidebar-header {
  padding: 16px 0;
  justify-content: center;
  position: relative;
  gap: 0;
}

.sidebar-collapsed .sidebar-logo {
  font-size: 24px;
}

.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-tertiary);
  border: none;
  box-shadow: none;
  z-index: 100;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.sidebar-collapsed .sidebar-nav {
  padding: 12px 0;
}

.sidebar-collapsed .sidebar-section {
  margin-bottom: 4px;
}

.sidebar-collapsed .sidebar-item {
  padding: 12px 0;
  justify-content: center;
  border-left: none;
  margin: 2px 10px;
  border-radius: 8px;
}

.sidebar-collapsed .sidebar-item:hover {
  background: var(--bg-hover);
}

.sidebar-collapsed .sidebar-item.active {
  background: var(--bg-tertiary);
  border-left: none;
}

.sidebar-collapsed .sidebar-item-icon {
  font-size: 20px;
  width: auto;
}

.sidebar-collapsed .sidebar-projects {
  padding: 0 10px;
}

.sidebar-collapsed .sidebar-project {
  padding: 10px 0;
  justify-content: center;
  border-radius: 8px;
  margin: 2px 0;
}

.sidebar-collapsed .sidebar-project-color {
  width: 16px;
  height: 16px;
}

.sidebar-collapsed .add-project-btn {
  padding: 10px 0;
  justify-content: center;
  margin: 4px 8px;
  border-radius: 8px;
  width: calc(100% - 16px);
}

.sidebar-collapsed .add-project-btn span:first-child {
  font-size: 18px;
  margin: 0;
}

.sidebar-collapsed .add-project-btn::after {
  content: "Новый проект";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  z-index: 1000;
  pointer-events: none;
}

.sidebar-collapsed .add-project-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

.sidebar-collapsed .sidebar-footer {
  padding: 12px 10px;
}

.sidebar-collapsed .sidebar-user {
  padding: 8px 0;
  justify-content: center;
}

.sidebar-collapsed .sidebar-user .avatar {
  width: 32px;
  height: 32px;
}

.sidebar-collapsed .sidebar-footer {
  padding: 12px 8px;
  display: flex;
  justify-content: center;
}

.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Тултипы для свёрнутого состояния */
.sidebar-collapsed .sidebar-item,
.sidebar-collapsed .sidebar-project,
.sidebar-collapsed .add-project-btn,
.sidebar-collapsed .sidebar-user {
  position: relative;
}

.sidebar-collapsed .sidebar-item[data-tooltip]::after,
.sidebar-collapsed .sidebar-project[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  z-index: 1000;
  pointer-events: none;
}

.sidebar-collapsed .sidebar-item[data-tooltip]:hover::after,
.sidebar-collapsed .sidebar-project[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  font-size: 24px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.sidebar-section {
  margin-bottom: 8px;
}

.sidebar-section-title {
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-item.active {
  background: var(--bg-tertiary);
  color: var(--primary);
  border-left-color: var(--primary);
}

.sidebar-item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.sidebar-item-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.sidebar-item-badge {
  background: var(--primary);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Проекты в сайдбаре */
.sidebar-projects {
  padding: 0 12px;
}

.sidebar-project {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-project:hover {
  background: var(--bg-hover);
}

.sidebar-project.active {
  background: var(--bg-tertiary);
}

.sidebar-project-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-project-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-project-count {
  font-size: 12px;
  color: var(--text-muted);
}

.sidebar-project-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-project-group .sidebar-project {
  flex: 1;
}

.sidebar-wiki-link {
  padding: 6px 8px;
  border-radius: var(--border-radius);
  font-size: 14px;
  text-decoration: none;
  opacity: 0.5;
  transition: all 0.15s;
}

.sidebar-wiki-link:hover {
  opacity: 1;
  background: var(--bg-secondary);
}

.sidebar-wiki-link.active {
  opacity: 1;
  background: var(--primary-color-10);
}

/* Футер сайдбара */
.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.sidebar-user-arrow {
  color: var(--text-muted);
  font-size: 14px;
  transition: transform var(--transition);
}

.sidebar-user:hover .sidebar-user-arrow {
  transform: translateX(4px);
  color: var(--primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-user:hover {
  background: var(--bg-hover);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.sidebar-user-role {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Основной контент */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0; /* Важно для работы overflow в дочерних элементах */
}

/* Хедер */
.header {
  height: var(--header-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.header-breadcrumb-sep {
  color: var(--text-muted);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Поиск в хедере */
.header-search {
  position: relative;
  width: 300px;
}

.header-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-size: 14px;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

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

.header-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* Уведомления */
.notifications-btn,
.favorites-btn {
  position: relative;
}

.notifications-badge,
.favorites-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.favorites-badge {
  background: var(--warning);
}

/* Модальное окно избранного */
.favorites-table {
  width: 100%;
  border-collapse: collapse;
}

.favorites-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.favorites-table th:first-child {
  width: 80px;
}

.favorites-table th:nth-child(3),
.favorites-table th:nth-child(4) {
  width: 140px;
}

.favorites-table th:last-child {
  width: 50px;
}

.favorites-table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
}

.favorites-table tr:hover {
  background: var(--bg-hover);
}

.task-number-link {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 4px 8px;
  background: var(--primary-light);
  border-radius: 4px;
  transition: all 0.2s;
}

.task-number-link:hover {
  background: var(--primary);
  color: white;
}

.favorite-task-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.favorite-task-link:hover {
  color: var(--primary);
}

.favorite-project {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.assignee-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Контент страницы */
.page-content {
  flex: 1;
  padding: 24px;
  overflow-x: hidden;
  min-width: 0; /* Важно для работы overflow в дочерних элементах */
}

/* Для страницы доски нужна горизонтальная прокрутка */
.page-content.board-view {
  padding: 0;
  overflow: visible;
}

.page-content:has(.board-page) {
  padding: 0;
  overflow: visible;
}

/* Переключатель темы */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--bg-hover);
}

/* Мобильная адаптация */
.mobile-menu-btn {
  display: none;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .header-search {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .header-search {
    display: none;
  }
  
  .page-content {
    padding: 16px;
  }
}

/* Оверлей для мобильного меню */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: calc(var(--z-sticky) - 1);
}

.sidebar-overlay.visible {
  display: block;
}

/* Добавить проект кнопка */
.add-project-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 12px;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px dashed var(--border-color);
}

.add-project-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* Результаты поиска */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--bg-hover);
}

.search-result-type {
  font-size: 18px;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-result-title mark {
  background: rgba(99, 102, 241, 0.3);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.search-result-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 3px 8px;
  border-radius: 4px;
}

.search-result-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.search-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Архивные задачи в поиске */
.search-result-item.archived {
  opacity: 0.7;
  background: rgba(156, 163, 175, 0.1);
}

.search-result-archived {
  font-size: 12px;
}

.search-archive-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.search-archive-toggle:hover {
  background: var(--bg-hover);
}

.search-archive-toggle input {
  cursor: pointer;
}

/**
 * Стили авторизации
 * Автор: Каюмов А.Р., 2025
 */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* Фоновый паттерн */
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-xl);
  animation: slideUp var(--transition-slow) forwards;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  font-size: 48px;
  margin-bottom: 16px;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form .form-group {
  margin-bottom: 0;
}

.auth-form .btn {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-footer a {
  color: var(--primary);
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Ошибка */
.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  font-size: 14px;
  text-align: center;
  animation: slideDown var(--transition-fast) forwards;
}

/* Показать пароль */
.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
}

.password-toggle:hover {
  color: var(--text-secondary);
}

/* Запомнить меня */
.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.auth-remember a {
  color: var(--primary);
}

/* Анимация загрузки */
.auth-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Адаптив */
@media (max-width: 480px) {
  .auth-card {
    padding: 24px;
  }
  
  .auth-logo {
    font-size: 40px;
  }
  
  .auth-title {
    font-size: 20px;
  }
}

/**
 * Стили дашборда
 * Автор: Каюмов А.Р., 2025
 */

.dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dashboard-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
}

/* Виджеты статистики */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.stat-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.primary { background: rgba(99, 102, 241, 0.15); }
.stat-icon.success { background: rgba(34, 197, 94, 0.15); }
.stat-icon.warning { background: rgba(245, 158, 11, 0.15); }
.stat-icon.danger { background: rgba(239, 68, 68, 0.15); }

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Секции дашборда */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.dashboard-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.dashboard-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-section-content {
  padding: 16px 20px;
  max-height: 400px;
  overflow-y: auto;
}

/* Список задач в дашборде */
.dashboard-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dashboard-task:hover {
  background: var(--bg-hover);
}

.dashboard-task-priority {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dashboard-task-content {
  flex: 1;
  min-width: 0;
}

.dashboard-task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.dashboard-task-project {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-task-deadline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-task-deadline.overdue {
  color: var(--danger);
}

/* Лента активности */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-avatar {
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.activity-text strong {
  font-weight: 600;
}

.activity-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* Избранные проекты */
.favorite-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.favorite-project {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.favorite-project:hover {
  background: var(--bg-hover);
}

.favorite-project-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.favorite-project-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-project-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* Адаптив */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 24px;
  }
}

/* Статистика времени */
.dashboard-time-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
  border-radius: var(--border-radius-lg);
}

.time-stat-card {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
}

.time-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.time-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

/* Сетка 3 колонки */
.dashboard-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .dashboard-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-grid-3 {
    grid-template-columns: 1fr;
  }
  
  .dashboard-time-stats {
    flex-direction: column;
  }
}

/* Дедлайны */
.deadline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deadline-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.deadline-item:hover {
  background: var(--bg-hover);
  transform: translateX(4px);
}

.deadline-days {
  min-width: 60px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.deadline-days.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.deadline-days.urgent {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.deadline-content {
  flex: 1;
  min-width: 0;
}

.deadline-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deadline-number {
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 4px;
}

.deadline-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.deadline-assignee {
  color: var(--text-muted);
}

.deadline-time {
  font-size: 11px;
  color: var(--primary);
  margin-top: 4px;
}

/* Модальное окно отчётов */
.reports-modal {
  max-width: 900px;
}

.reports-filters {
  background: var(--bg-secondary);
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

.reports-filter-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.reports-filter-row:last-child {
  margin-bottom: 0;
}

.reports-filter-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.reports-result {
  min-height: 300px;
}

.reports-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.reports-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.reports-empty-text {
  font-size: 15px;
}

.reports-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
  border-radius: var(--border-radius);
  color: white;
  margin-bottom: 20px;
}

.reports-total-label {
  font-size: 14px;
  opacity: 0.9;
}

.reports-total-value {
  font-size: 24px;
  font-weight: 700;
}

.reports-table-container {
  overflow-x: auto;
}

.reports-table {
  width: 100%;
  border-collapse: collapse;
}

.reports-table th,
.reports-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.reports-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reports-table tr:hover td {
  background: var(--bg-hover);
}

.report-time {
  font-weight: 600;
  color: var(--success);
}

.report-task-number {
  color: var(--text-muted);
  margin-right: 6px;
}

@media (max-width: 640px) {
  .reports-filter-row {
    flex-direction: column;
  }
}

/* Автодополнение в отчётах */
.autocomplete-container {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.autocomplete-dropdown.hidden {
  display: none;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.autocomplete-item:hover {
  background: var(--bg-hover);
}

.autocomplete-item .avatar {
  flex-shrink: 0;
}

.autocomplete-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/**
 * Стили админ-панели
 * Автор: Каюмов А.Р., 2025
 */

.admin-page {
  display: flex;
  min-height: calc(100vh - var(--header-height) - 48px);
  gap: 0;
}

/* Боковая панель */
.admin-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.admin-sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-color);
}

.admin-sidebar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Навигация */
.admin-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.admin-nav-section {
  margin-bottom: 24px;
}

.admin-nav-section:last-child {
  margin-bottom: 0;
}

.admin-nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: 0 12px;
  margin-bottom: 8px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.admin-nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.admin-nav-item.active {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.admin-nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.admin-nav-text {
  flex: 1;
}

/* Основной контент */
.admin-main {
  flex: 1;
  min-width: 0;
  padding: 24px;
  overflow-y: auto;
}

.admin-content {
  max-width: 1000px;
}

/* Старые стили табов - оставляем для совместимости */
.admin-tabs {
  display: none;
}

.admin-tab {
  display: none;
}

/* Секция */
.admin-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.admin-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-section-content {
  padding: 20px;
}

/* Таблица */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.admin-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: var(--bg-hover);
}

.admin-table-actions {
  display: flex;
  gap: 4px;
}

/* Список элементов */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.admin-list-item:hover {
  background: var(--bg-hover);
}

.admin-list-item-drag {
  cursor: grab;
  color: var(--text-muted);
  padding: 4px;
}

.admin-list-item-drag:active {
  cursor: grabbing;
}

.admin-list-item-color {
  width: 24px;
  height: 24px;
  border-radius: var(--border-radius-sm);
  flex-shrink: 0;
}

.admin-list-item-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.admin-list-item-content {
  flex: 1;
  min-width: 0;
}

.admin-list-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.admin-list-item-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.admin-list-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.admin-list-item:hover .admin-list-item-actions {
  opacity: 1;
}

/* Форма добавления */
.admin-add-form {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  margin-top: 16px;
}

.admin-add-form .input {
  flex: 1;
}

/* Пользователи */
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.user-email {
  font-size: 12px;
  color: var(--text-tertiary);
}

.user-role {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
}

.user-role.admin {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.user-role.manager {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.user-role.user {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
}

/* Заказчики */
.customer-type {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
}

.customer-type.external {
  background: rgba(59, 130, 246, 0.15);
  color: var(--info);
}

.customer-type.internal {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

/* Модальное окно настроек */
.settings-modal {
  max-width: 500px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  cursor: pointer;
}

.color-input {
  flex: 1;
}

.admin-section-desc {
  padding: 0 20px 16px;
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

/* Пресеты цветов и иконок */
.color-picker-row,
.icon-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-presets,
.icon-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-preset {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.color-preset:hover {
  transform: scale(1.1);
  border-color: var(--text-primary);
}

.icon-preset {
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-preset:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

/* Подсказка в форме */
.form-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Состояние перетаскивания */
.admin-list-item.dragging {
  opacity: 0.5;
  background: var(--primary);
}

/* Адаптив */
@media (max-width: 768px) {
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .admin-table {
    display: block;
    overflow-x: auto;
  }
  
  .admin-add-form {
    flex-direction: column;
  }
  
  .admin-list-item-actions {
    opacity: 1;
  }
}

/* === ИМПОРТ ЗАДАЧ === */

.import-container {
  max-width: 1000px;
  margin: 0 auto;
}

.import-header {
  text-align: center;
  margin-bottom: 32px;
}

.import-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.import-subtitle {
  color: var(--text-secondary);
}

/* Шаги */
.import-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.import-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  opacity: 0.5;
  transition: all var(--transition);
}

.import-step.active {
  opacity: 1;
  background: var(--primary);
  color: white;
}

.import-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.import-step.active .import-step-number {
  background: white;
  color: var(--primary);
}

.import-step-label {
  font-size: 14px;
  font-weight: 500;
}

/* Шаг 1 - Выбор проекта */
.import-project-select {
  max-width: 400px;
  margin: 0 auto 32px;
}

.import-project-dropdown {
  font-size: 16px;
  padding: 14px 16px;
}

/* Скачивание шаблона */
.import-template-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
  border-radius: var(--border-radius);
  border: 1px dashed var(--primary);
}

.import-template-hint {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Шаг 2 - Источник данных */
.import-source-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.import-source-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}

.import-source-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
  transform: translateY(-4px);
}

.import-source-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.import-source-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.import-source-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* Таблица импорта */
.import-table-container {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 16px;
}

.import-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.import-table-hint {
  font-size: 12px;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  margin-bottom: 12px;
}

.import-row-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
}

.import-table-wrapper {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.import-table th,
.import-table td {
  padding: 8px;
  border: 1px solid var(--border-color);
  min-width: 120px;
}

.import-table th {
  background: var(--bg-tertiary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.import-row-num {
  width: 40px;
  min-width: 40px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

.import-header-input,
.import-cell-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  color: var(--text-primary);
}

.import-header-input {
  font-weight: 600;
  background: var(--bg-secondary);
}

.import-header-input:focus,
.import-cell-input:focus {
  border-color: var(--primary);
  background: var(--bg-primary);
  outline: none;
}

.import-actions-col {
  width: 40px;
  min-width: 40px;
}

.import-delete-row {
  opacity: 0.3;
}

.import-delete-row:hover {
  opacity: 1;
  color: var(--danger);
}

/* Строки таблицы импорта */
.import-table tbody tr.empty {
  opacity: 0.6;
}

.import-table tbody tr.filled {
  background: rgba(34, 197, 94, 0.05);
}

.import-table tbody tr.filled td:first-child {
  color: var(--success);
  font-weight: 600;
}

/* Шаг 3 - Сопоставление */
.import-mapping-title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.import-mapping-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.import-mapping-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}

.import-mapping-source {
  flex: 1;
  min-width: 0;
}

.import-mapping-source-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.import-mapping-source-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.import-mapping-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.import-mapping-preview span {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  color: var(--text-secondary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-mapping-arrow {
  font-size: 20px;
  color: var(--primary);
  font-weight: bold;
}

.import-mapping-target {
  width: 220px;
  flex-shrink: 0;
}

.import-mapping-select {
  width: 100%;
}

.import-default-column {
  max-width: 400px;
  margin: 0 auto 32px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}

/* Результат */
.import-result {
  text-align: center;
  padding: 60px 20px;
}

.import-result-icon {
  font-size: 72px;
  margin-bottom: 24px;
}

.import-result-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 32px;
}

.import-result-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}

.import-stat {
  text-align: center;
}

.import-stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
}

.import-stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

.import-errors {
  max-width: 500px;
  margin: 0 auto 32px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--border-radius);
  text-align: left;
}

.import-errors h4 {
  color: var(--danger);
  margin-bottom: 12px;
}

.import-error-item {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Actions */
.import-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .import-steps {
    flex-wrap: wrap;
  }
  
  .import-source-options {
    grid-template-columns: 1fr;
  }
  
  .import-mapping-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .import-mapping-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
  
  .import-mapping-target {
    width: 100%;
  }
}

/* Проекты и доступ */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-access-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.project-access-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.project-access-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.project-name {
  font-weight: 600;
  color: var(--text-primary);
}

.project-visibility {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.project-visibility.private {
  background: #fef3c7;
  color: #92400e;
}

.project-visibility.public {
  background: #d1fae5;
  color: #065f46;
}

.project-access-actions {
  display: flex;
  gap: 8px;
}

/* Участники проекта */
.members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-secondary);
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.2s;
}

.member-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-details {
  display: flex;
  flex-direction: column;
}

.member-name {
  font-weight: 600;
  color: var(--text-primary);
}

.member-email {
  font-size: 12px;
  color: var(--text-muted);
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Поиск участников */
.member-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  margin-top: 4px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: var(--bg-secondary);
}

.search-result-item:first-child {
  border-radius: 8px 8px 0 0;
}

.search-result-item:last-child {
  border-radius: 0 0 8px 8px;
}

.search-result-item:only-child {
  border-radius: 8px;
}

.avatar-md {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

/* Telegram настройки */
.admin-telegram-info {
  margin-bottom: 24px;
}

.telegram-info-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid var(--primary-color);
}

.telegram-info-card h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
}

.telegram-info-card ol {
  margin: 0;
  padding-left: 20px;
}

.telegram-info-card li {
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.telegram-info-card code {
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.telegram-token-input {
  display: flex;
  gap: 8px;
}

.telegram-token-input .input {
  flex: 1;
}

.admin-section-divider {
  height: 1px;
  background: var(--border-color);
  margin: 32px 0;
}

.telegram-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.telegram-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.telegram-feature-icon {
  font-size: 20px;
}

/* Telegram в профиле */
.telegram-notifications-list {
  margin: 16px 0;
}

.telegram-actions {
  display: flex;
  gap: 8px;
}

/* ===== Шаблоны задач ===== */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

.template-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
}

.template-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.template-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.template-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.template-info {
  flex: 1;
  min-width: 0;
}

.template-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.template-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.template-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.template-badge.global {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

.template-badge.project {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.template-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.template-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  color: var(--text-secondary);
}

.template-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* ===== Резервное копирование ===== */
.backup-info {
  margin-bottom: 24px;
}

.backup-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.backup-stat {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.backup-stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.backup-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.backup-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.backups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.backup-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}

.backup-item:hover {
  border-color: var(--primary);
}

.backup-item-icon {
  font-size: 24px;
}

.backup-item-info {
  flex: 1;
}

.backup-item-name {
  font-weight: 500;
  font-size: 13px;
  font-family: monospace;
}

.backup-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.backup-item-actions {
  display: flex;
  gap: 4px;
}

/* Удалён дубликат .admin-section-desc - используется версия выше */

/* Стили модальных форм в админке */
.modal-overlay .modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-overlay .modal .form-group {
  margin-bottom: 16px;
}

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

.modal-overlay .modal .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.modal-overlay .modal .input,
.modal-overlay .modal .select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-overlay .modal .input:focus,
.modal-overlay .modal .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.modal-overlay .modal .select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.modal-overlay .modal .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.modal-overlay .modal .checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.modal-overlay .modal textarea.input {
  resize: vertical;
  min-height: 80px;
}

.modal-overlay .modal .modal-body {
  padding: 20px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-overlay .modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-overlay .modal .modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-overlay .modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .modal-overlay .modal .form-row {
    grid-template-columns: 1fr;
  }
}

/* Карточка настроек автобэкапа */
.backup-schedule-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.backup-schedule-card h4 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
}

.backup-schedule-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.backup-schedule-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 500px) {
  .backup-schedule-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .backup-schedule-fields .form-group {
    width: 100%;
  }
}

.backup-schedule-fields .form-group {
  margin: 0;
  min-width: 120px;
}

.backup-last-run {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Toggle switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  width: 44px;
  min-width: 44px;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 52px;
}

.backup-schedule-form .toggle-switch {
  margin-bottom: 8px;
}

/* === Экспорт === */
.export-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.export-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-filters {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.export-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.export-date-range {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.export-date-range .form-group {
  flex: 1;
  max-width: 200px;
}

.export-columns {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.export-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.export-columns-grid .checkbox-label {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  transition: all 0.2s;
}

.export-columns-grid .checkbox-label:hover {
  background: var(--bg-hover);
}

.export-columns-grid .checkbox-label input:checked + span {
  color: var(--primary);
  font-weight: 500;
}

.export-select-all {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.export-preview {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.export-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.export-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.export-preview-table {
  max-height: 500px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.export-preview-wrapper {
  overflow-x: auto;
}

.export-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.export-th {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 1;
}

.export-th:first-child {
  border-radius: 8px 0 0 0;
}

.export-th:last-child {
  border-radius: 0 8px 0 0;
}

.export-row {
  transition: background 0.15s;
}

.export-row.even {
  background: var(--bg-primary);
}

.export-row.odd {
  background: var(--bg-secondary);
}

.export-row:hover {
  background: var(--primary-light);
}

.export-td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.export-cell-number {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 8px;
  border-radius: 4px;
}

.export-cell-title {
  font-weight: 500;
  color: var(--text-primary);
  max-width: 250px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-cell-desc {
  color: var(--text-secondary);
  font-size: 12px;
  max-width: 200px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-cell-empty {
  color: var(--text-muted);
  font-style: italic;
}

.export-cell-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.export-cell-customer {
  background: #dbeafe;
  color: #1e40af;
}

.export-cell-config {
  background: #fce7f3;
  color: #9d174d;
}

.export-cell-sprint {
  background: #d1fae5;
  color: #065f46;
}

.export-cell-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.export-cell-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.export-cell-date.overdue {
  color: var(--danger);
  font-weight: 600;
}

.export-cell-priority {
  font-weight: 500;
}

.export-cell-type {
  color: var(--text-secondary);
}

.export-cell-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  font-size: 12px;
  font-weight: 500;
}

.export-cell-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin-right: 4px;
}

.export-cell-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}

.export-cell-sprints {
  font-size: 12px;
  color: var(--text-secondary);
}

.export-cell-project {
  font-weight: 500;
  color: var(--text-primary);
}

.export-more-info {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-tertiary) 100%);
  border-top: 1px solid var(--border-color);
  font-weight: 500;
}

.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.export-actions .btn-lg {
  padding: 12px 32px;
  font-size: 16px;
}

/**
 * Стили канбан-доски
 * Автор: Каюмов А.Р., 2025
 */

.board-page {
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden; /* Изолируем от body */
  position: relative;
}

/* Хедер доски */
.board-header {
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.board-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-title-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.board-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Плавающая панель с кнопками - всегда видна */
.board-floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  background: var(--card-bg);
  padding: 12px 16px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
}

.board-floating-actions .btn {
  white-space: nowrap;
}

/* Модальное окно архива */
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  transition: background var(--transition);
}

.archive-item:hover {
  background: var(--bg-hover);
}

.archive-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.archive-item-number {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.archive-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.archive-item-date {
  font-size: 12px;
  color: var(--text-muted);
}

.archive-item-actions {
  display: flex;
  gap: 4px;
}

/* Табы представлений */
.board-views {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 4px;
  border-radius: var(--border-radius);
}

.board-view-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.board-view-btn:hover {
  color: var(--text-primary);
}

.board-view-btn.active {
  background: var(--card-bg);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Контейнер доски */
.board-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 24px;
  padding-bottom: 100px; /* Место для плавающей панели */
  scroll-behavior: smooth; /* Плавная прокрутка */
  position: relative; /* Создаём контекст */
  min-width: 0; /* Важно для flex! Позволяет сжиматься */
}

/* Красивый скроллбар в стиле проекта */
.board-container::-webkit-scrollbar {
  height: 14px;
  background: var(--bg-secondary);
}

.board-container::-webkit-scrollbar-track {
  background: var(--bg-tertiary, #1a1a2e);
  border-radius: 7px;
  margin: 0 8px;
}

.board-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  border-radius: 7px;
  border: 3px solid var(--bg-tertiary, #1a1a2e);
  min-width: 60px;
}

.board-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #8b5cf6, var(--primary));
}

.board-container::-webkit-scrollbar-thumb:active {
  background: var(--primary);
}

/* Firefox */
@supports (scrollbar-width: thin) {
  .board-container {
    scrollbar-width: auto;
    scrollbar-color: var(--primary) var(--bg-tertiary, #1a1a2e);
  }
}

.board {
  display: inline-flex; /* inline-flex вместо flex для правильной ширины */
  gap: 16px;
  min-height: 100%;
  padding-right: 24px;
  padding-bottom: 16px;
}

/* Колонка */
.board-column {
  width: 320px;
  min-width: 320px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.board-column.dragging {
  opacity: 0.5;
}

.board-column.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

/* Хедер колонки */
.column-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  cursor: grab;
}

.column-header:active {
  cursor: grabbing;
}

.column-color {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}

.column-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.column-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

.column-menu-btn {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.column-header:hover .column-menu-btn {
  opacity: 1;
}

/* Контент колонки */
.column-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Добавить задачу */
.column-add-task {
  padding: 8px;
}

.add-task-btn {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
}

.add-task-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

/* Добавить колонку */
/* Кнопка добавления колонки (в плавающей панели) */
.btn-outline {
  background: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
}

/* Быстрое добавление задачи */
.quick-add-task {
  padding: 8px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.quick-add-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  resize: none;
}

.quick-add-input:focus {
  outline: none;
}

.quick-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Массовый выбор */
.board-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-sticky);
  animation: slideUp var(--transition) forwards;
}

.bulk-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.bulk-actions {
  display: flex;
  gap: 8px;
}

/* Меню колонки */
.column-menu {
  min-width: 200px;
}

.column-menu-colors {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.column-menu-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.column-menu-color:hover {
  transform: scale(1.1);
}

.column-menu-color.active {
  border-color: var(--text-primary);
}

/* Фильтры доски */
.board-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  background: var(--bg-hover);
}

.filter-btn.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border-color: var(--primary);
}

.filter-badge {
  background: var(--primary);
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
}

/* Адаптив */
@media (max-width: 768px) {
  .board-header {
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  
  .board-views {
    order: 1;
    width: 100%;
    margin-top: 8px;
  }
  
  .board-container {
    padding: 16px;
  }
  
  .board-column {
    width: 280px;
    min-width: 280px;
  }
}

/* Фильтры */
.board-filters {
  display: flex;
  gap: 8px;
}

.filter-dropdown {
  position: relative;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.filter-btn.active {
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--primary);
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  z-index: var(--z-dropdown);
  max-height: 350px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.filter-search {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.filter-search input {
  width: 100%;
}

.filter-menu-items {
  overflow-y: auto;
  flex: 1;
}

.filter-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.filter-menu-item:hover {
  background: var(--bg-hover);
}

.filter-menu-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

.priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.avatar-xs {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.filter-clear {
  background: var(--danger-light, rgba(239, 68, 68, 0.1));
  color: var(--danger);
  border-color: var(--danger);
}

.filter-clear:hover {
  background: var(--danger);
  color: white;
}

/**
 * Стили карточки задачи
 * Автор: Каюмов А.Р., 2025
 */

.task-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.task-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.task-card.dragging {
  opacity: 0.5;
  transform: rotate(3deg);
}

.task-card.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

/* Чекбокс выбора */
.task-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.task-card:hover .task-card-checkbox,
.task-card.selected .task-card-checkbox {
  opacity: 1;
}

/* Заголовок карточки */
.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Номер задачи */
.task-card-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Кнопка избранного */
.task-favorite-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}

.task-favorite-btn:hover {
  opacity: 1;
  transform: scale(1.2);
}

.task-favorite-btn.active {
  opacity: 1;
}

.task-card:hover .task-favorite-btn {
  opacity: 0.7;
}

.task-card:hover .task-favorite-btn:hover,
.task-card:hover .task-favorite-btn.active {
  opacity: 1;
}

/* Стикеры (заказчик, конфигурация) */
.task-card-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.task-card-sticker {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-card-sprint {
  background: linear-gradient(135deg, #8b5cf620, #6366f120);
  color: var(--primary);
}

.task-card-label {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
}

/* Подзадачи в карточке */
.task-card-subtasks-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-card-subtask {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.task-card-subtask.done {
  opacity: 0.5;
  text-decoration: line-through;
}

.task-card-subtask .subtask-num {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.task-card-subtask .subtask-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.task-card-subtask .subtask-status {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}

.task-card-subtask .subtask-user {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.task-card-subtasks-more {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 2px;
}

/* Группа подзадач */
.subtasks-group {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  transition: all 0.2s ease;
}

.subtasks-group.collapsed {
  display: none;
}

/* Карточка подзадачи */
.task-card-subtask {
  position: relative;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: var(--border-radius);
}

.task-card-subtask.done {
  opacity: 0.5;
  background: var(--bg-secondary);
}

.task-card-subtask.done .task-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-card-subtask .task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-card-subtask .task-card-number {
  font-size: 14px;
}

.task-card-status {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.task-card-sticker-sm {
  font-size: 10px;
  padding: 1px 6px;
}

.task-card-subtask .subtask-connector {
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--primary);
}

/* Кнопка раскрытия */
.subtasks-toggle {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.subtasks-toggle:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.task-card.has-subtasks {
  padding-bottom: 36px;
}

/* Мини-аватар для подзадач */
.task-card-assignee-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.task-card-assignee-mini .avatar-xs {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

/* Бейдж подзадач */
.task-card-subtasks-badge {
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Тип задачи */
.task-card-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.task-card-type-icon {
  font-size: 14px;
}

/* Заголовок */
.task-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Теги */
.task-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.task-card-tag {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Мета информация */
.task-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Приоритет */
.task-card-priority {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Дедлайн */
.task-card-deadline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.task-card-deadline.overdue {
  color: var(--danger);
}

.task-card-deadline.soon {
  color: var(--warning);
}

/* Подзадачи */
.task-card-subtasks {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.task-card-subtasks-progress {
  width: 40px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.task-card-subtasks-bar {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width var(--transition);
}

/* Футер карточки */
.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.task-card-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-card-assignee-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.task-card-comments {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.task-card-attachments {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ID задачи */
.task-card-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Время */
.task-card-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Индикатор повторяющейся задачи */
.task-card-recurring {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  color: var(--primary);
}

/* Превью изображения */
.task-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  margin-bottom: 8px;
}

/* Цветовая полоска приоритета */
.task-card-priority-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Hover эффекты */
.task-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.task-card:hover .task-card-actions {
  opacity: 1;
}

/* Компактный вид */
.task-card.compact {
  padding: 8px 10px;
}

.task-card.compact .task-card-title {
  font-size: 13px;
  margin-bottom: 4px;
  -webkit-line-clamp: 1;
}

.task-card.compact .task-card-meta {
  font-size: 11px;
}

/* Связанная задача */
.task-card.linked {
  border-left: 3px solid var(--info);
}

/* Заблокированная задача */
.task-card.blocked {
  opacity: 0.7;
}

.task-card.blocked::after {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
}

/**
 * Стили модального окна задачи
 * Автор: Каюмов А.Р., 2025
 */

/* Оверлей */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
  animation: fadeIn var(--transition-fast) forwards;
}

/* Модальное окно */
.modal {
  background: var(--card-bg);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: scaleIn var(--transition) forwards;
  box-shadow: var(--shadow-xl);
}

.modal-sm { max-width: 400px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1200px; }

/* Поле автора */
/* Автор и Дата создания в одну линию */
.task-author-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.task-author-field {
  flex: 1;
}

.task-created-field {
  flex: 1;
}

.task-author-display,
.task-created-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  font-size: 14px;
}

.task-created-icon {
  font-size: 16px;
}

/* Хедер модалки */
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.task-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Редактируемый номер задачи */
.task-number-edit {
  display: flex;
  align-items: center;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 6px;
  padding: 0 8px;
}

.task-number-prefix {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
}

.task-number-input {
  width: 70px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
  padding: 4px 0;
  outline: none;
}

.task-number-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.task-number-input::-webkit-outer-spin-button,
.task-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.modal-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-close {
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  font-size: 20px;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Контент модалки */
.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Футер модалки */
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Модалка задачи */
.task-modal {
  max-width: 1000px;
}

.task-modal-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

/* Основная часть */
.task-modal-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Заголовок задачи */
.task-modal-title-input {
  font-size: 20px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  padding: 0;
}

.task-modal-title-input:focus {
  outline: none;
}

.task-modal-title-input::placeholder {
  color: var(--text-muted);
}

/* Описание */
.task-modal-description {
  min-height: 120px;
}

/* Секции */
.task-modal-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.task-modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Подзадачи */
.subtasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subtask-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
}

.subtask-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.subtask-content {
  flex: 1;
  min-width: 0;
}

.subtask-title {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtask-item .subtask-number {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.subtask-avatar {
  flex-shrink: 0;
}

.subtask-item.done {
  opacity: 0.6;
}

.subtask-item.done .subtask-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.subtask-title.done {
  text-decoration: line-through;
  color: var(--text-muted);
}

.subtask-content {
  flex: 1;
  min-width: 0;
}

.subtask-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
}

.subtask-number {
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 4px;
  border-radius: 3px;
}

.subtask-priority {
  font-weight: 500;
}

.subtask-assignee {
  color: var(--text-secondary);
}

.subtasks-counter {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

/* Кнопка добавления подзадачи */
.add-subtask-btn-full {
  width: 100%;
  margin-top: 8px;
}

/* Информация о родительской задаче */
.subtask-parent-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: rgba(99, 102, 241, 0.1);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.subtask-parent-label {
  color: var(--text-secondary);
}

.subtask-parent-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.subtask-parent-link:hover {
  text-decoration: underline;
  color: #8b5cf6;
}

/* Модальное окно подтверждения */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}

.confirm-modal {
  background: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.confirm-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.confirm-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.confirm-modal-content {
  margin-bottom: 20px;
}

.confirm-subtask-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  margin-bottom: 12px;
}

.confirm-modal-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.confirm-modal-text.text-muted {
  color: var(--text-tertiary);
  font-style: italic;
}

.confirm-modal-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--border-radius);
  color: var(--danger);
  font-size: 14px;
  margin-top: 12px;
}

.confirm-modal-warning .warning-icon {
  font-size: 18px;
}

.confirm-modal-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--border-radius);
  color: var(--primary);
  font-size: 14px;
  margin-top: 12px;
}

.confirm-modal-info .info-icon {
  font-size: 18px;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.subtask-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.subtask-item:hover .subtask-delete {
  opacity: 1;
}

.add-subtask {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.add-subtask-input {
  flex: 1;
}

/* Вложения */
.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  font-size: 13px;
  color: var(--text-primary);
  max-width: 200px;
}

.attachment-icon {
  font-size: 18px;
}

.attachment-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 11px;
  color: var(--text-muted);
}

.attachment-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.attachment-item:hover .attachment-delete {
  opacity: 1;
}

.upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upload-zone:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.upload-zone-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.upload-zone-text {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Комментарии (чат) */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-content {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  padding: 10px 12px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.comment-time {
  font-size: 11px;
  color: var(--text-muted);
}

.comment-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.comment-text a {
  color: var(--primary);
}

.comment-form {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.comment-input {
  flex: 1;
}

/* История изменений */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.history-icon {
  width: 24px;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.history-content {
  flex: 1;
}

.history-text {
  color: var(--text-secondary);
}

.history-text strong {
  color: var(--text-primary);
}

.history-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* Сайдбар задачи */
.task-modal-sidebar {
  border-left: 1px solid var(--border-color);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Метки задачи */
.task-labels-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-labels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-label-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid;
}

.task-label-remove {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  line-height: 1;
}

.task-label-remove:hover {
  opacity: 1;
}

.add-label-btn {
  align-self: flex-start;
}

.label-picker {
  position: absolute;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 100;
  max-width: 250px;
}

.label-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.label-picker-item {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.label-picker-item:hover {
  transform: scale(1.05);
}

.task-field-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: 14px;
  color: var(--text-primary);
}

.task-field-value:hover {
  background: var(--bg-hover);
}

.task-field-placeholder {
  color: var(--text-muted);
}

/* Наблюдатели */
.watchers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.watcher-avatar {
  position: relative;
}

.watcher-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.watcher-avatar:hover .watcher-remove {
  opacity: 1;
}

/* Связанные задачи */
.relations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.relation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  cursor: pointer;
}

.relation-item:hover {
  background: var(--bg-hover);
}

.relation-type {
  font-size: 11px;
  color: var(--text-muted);
}

/* Учёт времени */
.time-tracking {
  display: flex;
  gap: 12px;
}

.time-field {
  flex: 1;
}

.time-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.time-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Превью изображений */
.image-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
}

.image-preview-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.image-preview-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.image-preview-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  padding: 8px;
}

/* Вложения - ссылки */
.attachment-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.attachment-link:hover {
  color: var(--primary);
}

/* Адаптив */
@media (max-width: 768px) {
  .task-modal-body {
    grid-template-columns: 1fr;
  }
  
  .task-modal-sidebar {
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 20px;
  }
  
  .modal {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Меню упоминаний */
.mention-menu {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  max-height: 200px;
  overflow-y: auto;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mention-item:hover {
  background: var(--bg-hover);
}

/* История изменений - группировка по датам */
.history-group {
  margin-bottom: 8px;
}

.history-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.history-group-header:hover {
  background: var(--bg-tertiary);
}

.history-group-toggle {
  font-size: 10px;
  color: var(--text-muted);
  width: 12px;
}

.history-group-date {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.history-group-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

.history-group-items {
  padding: 8px 0 8px 20px;
  border-left: 2px solid var(--border-color);
  margin-left: 16px;
  margin-top: 8px;
}

/* История изменений */
.history-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.history-item:last-child {
  border-bottom: none;
}

.history-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.history-content {
  flex: 1;
  font-size: 13px;
}

.history-user {
  font-weight: 500;
  color: var(--text-primary);
}

.history-action {
  color: var(--text-secondary);
  margin-left: 4px;
}

.history-time {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.history-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.history-changes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  font-size: 12px;
}

.history-old {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.8;
}

.history-arrow {
  color: var(--text-muted);
  font-size: 14px;
}

.history-new {
  color: var(--success);
  font-weight: 500;
}

.history-value {
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.history-empty {
  color: var(--text-muted);
  font-style: italic;
}

.history-created {
  background: rgba(var(--success-rgb), 0.05);
  border-radius: var(--border-radius);
  padding: 8px 12px !important;
  margin: 4px 0;
}

/* Вкладка Спринты */
.task-modal-sprints {
  padding: 20px;
}

.sprints-history-header {
  margin-bottom: 20px;
}

.sprints-stats {
  display: flex;
  gap: 24px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
}

.sprint-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sprint-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.sprint-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.sprints-history-table {
  overflow-x: auto;
}

.sprints-history-table .table {
  width: 100%;
  font-size: 13px;
}

.sprints-history-table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 12px 10px;
  background: var(--bg-secondary);
}

.sprints-history-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

.sprint-name-cell {
  display: flex;
  flex-direction: column;
}

.sprint-name-cell strong {
  color: var(--text-primary);
}

.sprint-dates {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sprint-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.sprint-status-active {
  background: rgba(var(--warning-rgb), 0.15);
  color: var(--warning);
}

.sprint-status-completed {
  background: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}

.sprint-status-planned {
  background: rgba(var(--info-rgb), 0.15);
  color: var(--info);
}

.task-column-badge {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 12px;
}

.assignee-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.result-success {
  background: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}

.result-failed {
  background: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}

.result-pending {
  background: rgba(var(--warning-rgb), 0.15);
  color: var(--warning);
}

.sprint-completed-row {
  background: rgba(var(--success-rgb), 0.03);
}

.sprint-failed-row {
  background: rgba(var(--danger-rgb), 0.03);
}

/* Вкладки модального окна */
.task-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.task-modal-tab {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.task-modal-tab:hover {
  color: var(--text-primary);
}

.task-modal-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

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

.task-modal-history .history-list {
  max-height: none;
}

/* Информация о работе с задачей */
.task-work-info {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.task-work-info-row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.task-work-info-row:last-child {
  margin-bottom: 0;
}

.task-work-info-item {
  flex: 1;
}

.task-work-info-item.full-width {
  flex: 1 1 100%;
}

.task-work-info-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.task-work-info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.task-work-info-value.completed {
  color: var(--success);
}

.task-work-info-value .last-change-date {
  color: var(--text-primary);
}

.task-work-info-value .last-change-user {
  color: var(--primary);
  margin-left: 8px;
}

/* Вкладка Статьи */
.task-modal-articles {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.articles-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.articles-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.articles-empty-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.articles-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.articles-header {
  margin-bottom: 16px;
}

.articles-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.articles-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.article-card:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  transform: translateX(4px);
}

.article-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.article-card-content {
  flex: 1;
  min-width: 0;
}

.article-card-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.article-card-arrow {
  font-size: 18px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.article-card:hover .article-card-arrow {
  transform: translateX(4px);
  color: var(--primary);
}

/* Searchable Select */
.searchable-select {
  position: relative;
}

.searchable-input {
  width: 100%;
}

.searchable-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.searchable-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.searchable-item:hover {
  background: var(--bg-hover);
}

.searchable-item.selected {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

.searchable-item-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.searchable-item-clear {
  color: var(--text-muted);
}

.searchable-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* === ТАЙМ-ТРЕКЕР === */

.task-modal-timetracker {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.timetracker-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timetracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
  border-radius: var(--border-radius-lg);
  color: white;
}

.timetracker-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timetracker-total-label {
  font-size: 13px;
  opacity: 0.9;
}

.timetracker-total-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.timetracker-entries {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timetracker-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.timetracker-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.timetracker-empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

.timetracker-empty-hint {
  font-size: 13px;
  opacity: 0.7;
}

.timetracker-day {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.timetracker-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.timetracker-day-date {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.timetracker-day-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.timetracker-day-entries {
  display: flex;
  flex-direction: column;
}

.timetracker-entry {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.timetracker-entry:last-child {
  border-bottom: none;
}

.timetracker-entry:hover {
  background: var(--bg-hover);
}

.timetracker-entry-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
}

.timetracker-entry-duration {
  font-size: 15px;
  font-weight: 600;
  color: var(--success);
}

.timetracker-entry-hour {
  font-size: 12px;
  color: var(--text-muted);
}

.timetracker-entry-content {
  flex: 1;
  min-width: 0;
}

.timetracker-entry-user {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.timetracker-entry-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.timetracker-entry-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.timetracker-entry:hover .timetracker-entry-delete {
  opacity: 1;
}

/* Кнопка фиксации времени */
.log-time-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
}

/* Модальное окно фиксации времени */
.log-time-modal {
  max-width: 420px;
}

.log-time-form {
  text-align: left;
  margin: 16px 0;
}

.log-time-form .form-group {
  margin-bottom: 16px;
}

.log-time-form .form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Быстрые кнопки времени */
.quick-time-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-time-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-time-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.quick-time-btn.active {
  transform: scale(0.95);
  background: var(--primary-dark);
  color: white;
}

.quick-time-btn.quick-time-clear {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.quick-time-btn.quick-time-clear:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

/* Поле затраченного времени (readonly) */
.time-spent-display {
  background: var(--bg-tertiary) !important;
  color: var(--success) !important;
  font-weight: 600;
  cursor: default;
}

/* Расширяемый редактор описания */
.description-group {
  position: relative;
}

.description-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.description-header .form-label {
  margin-bottom: 0;
}

.expand-description-btn {
  padding: 4px 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.expand-icon {
  font-size: 18px;
  line-height: 1;
}

.description-editor {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

.description-editor.expanded {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 1000px !important;
  height: 80vh !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e0e0e0 !important;
}

/* Кнопка закрытия развёрнутого редактора */
.expanded-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  z-index: 10;
  transition: background 0.2s;
}

.expanded-close-btn:hover {
  background: var(--primary-dark);
}

[data-theme="dark"] .description-editor.expanded {
  background: #1e1e2e;
}

.description-editor.expanded .description-toolbar {
  border-radius: 12px 12px 0 0;
  padding: 12px 16px;
  background: #f5f5f5;
}

[data-theme="dark"] .description-editor.expanded .description-toolbar {
  background: #2d2d3d;
}

.description-editor.expanded .description-content {
  flex: 1;
  height: auto;
  max-height: none;
  padding: 20px;
  font-size: 16px;
  border-radius: 0 0 12px 12px;
  background: #ffffff;
  color: #1a1a2e;
}

[data-theme="dark"] .description-editor.expanded .description-content {
  background: #1e1e2e;
  color: #e4e6eb;
}

/* Затемнение фона при развёрнутом редакторе */
.description-editor.expanded::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  pointer-events: none;
}

.description-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all 0.15s ease;
}

.toolbar-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

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

.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
}

.description-content {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #ffffff;
}

[data-theme="dark"] .description-content {
  background: #1e1e2e;
  color: #e4e6eb;
}

.description-content:focus {
  outline: none;
}

.description-content:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.description-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: 8px 0;
  cursor: pointer;
}

.description-content ul,
.description-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.description-content a {
  color: var(--primary-color);
  text-decoration: underline;
}

/**
 * Стили списка задач
 * Автор: Каюмов А.Р., 2025
 */

.task-list-page {
  max-width: 1400px;
  margin: 0 auto;
}

.task-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.task-list-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Группировка */
.task-list-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.task-list-group {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.task-list-group-header {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.task-list-group-header:hover {
  background: var(--bg-hover);
}

.task-list-group-toggle {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.task-list-group.collapsed .task-list-group-toggle {
  transform: rotate(-90deg);
}

.task-list-group-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.task-list-group-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.task-list-group-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

.task-list-group-content {
  display: flex;
  flex-direction: column;
}

.task-list-group.collapsed .task-list-group-content {
  display: none;
}

/* Строка задачи */
.task-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.task-list-item:last-child {
  border-bottom: none;
}

.task-list-item:hover {
  background: var(--bg-hover);
}

.task-list-item.selected {
  background: rgba(99, 102, 241, 0.05);
}

.task-list-checkbox {
  flex-shrink: 0;
}

.task-list-priority {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}

.task-list-type {
  font-size: 16px;
  flex-shrink: 0;
}

.task-list-content {
  flex: 1;
  min-width: 0;
}

.task-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-list-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list-item-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.task-list-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.task-list-item-project {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-list-item-column {
  padding: 1px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

/* Колонки таблицы */
.task-list-assignee {
  width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.task-list-assignee-name {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list-deadline {
  width: 100px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.task-list-deadline.overdue {
  color: var(--danger);
}

.task-list-deadline.soon {
  color: var(--warning);
}

.task-list-status {
  width: 120px;
  flex-shrink: 0;
}

.task-list-status-badge {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Табличный вид */
.task-table {
  width: 100%;
  border-collapse: collapse;
}

.task-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}

.task-table th:hover {
  background: var(--bg-hover);
}

.task-table th.sorted {
  color: var(--primary);
}

.task-table th .sort-icon {
  margin-left: 4px;
}

.task-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.task-table tr:hover td {
  background: var(--bg-hover);
}

/* Пустое состояние */
.task-list-empty {
  padding: 60px 20px;
  text-align: center;
}

.task-list-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.task-list-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.task-list-empty-text {
  color: var(--text-secondary);
}

/* Адаптив */
@media (max-width: 1024px) {
  .task-list-assignee,
  .task-list-deadline,
  .task-list-status {
    display: none;
  }
}

@media (max-width: 768px) {
  .task-list-item {
    padding: 10px 12px;
  }
}

/* Панель фильтров */
.task-filters-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.task-filters-bar .select-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 0.85rem;
  min-width: 150px;
}

.task-filters-bar .btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .task-filters-bar {
    flex-direction: column;
  }
  
  .task-filters-bar .select-sm {
    width: 100%;
  }
}

/**
 * Стили диаграммы Ганта
 * Автор: Каюмов А.Р., 2025
 */

.gantt-page {
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gantt-header {
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 16px;
}

.gantt-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gantt-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 4px;
  border-radius: var(--border-radius);
}

.gantt-zoom-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
}

.gantt-zoom-btn:hover {
  color: var(--text-primary);
}

.gantt-zoom-btn.active {
  background: var(--card-bg);
  color: var(--primary);
}

.gantt-today-btn {
  padding: 6px 12px;
  font-size: 13px;
}

/* Контейнер диаграммы */
.gantt-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Левая панель - список задач */
.gantt-sidebar {
  width: 300px;
  min-width: 300px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.gantt-sidebar-header {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.gantt-sidebar-content {
  flex: 1;
  overflow-y: auto;
}

.gantt-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 40px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.gantt-group-header:hover {
  background: var(--bg-hover);
}

.gantt-group-toggle {
  width: 16px;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.gantt-group-header.collapsed .gantt-group-toggle {
  color: var(--text-secondary);
}

.gantt-group-name {
  flex: 1;
}

.gantt-group-count {
  background: var(--bg-secondary);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.gantt-task-row.hidden,
.gantt-bar.hidden {
  display: none !important;
}

.gantt-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 40px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.gantt-task-row:hover {
  background: var(--bg-hover);
}

.gantt-task-expand {
  width: 20px;
  color: var(--text-muted);
  cursor: pointer;
}

.gantt-task-type-icon {
  font-size: 14px;
}

.gantt-task-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-task-row.subtask {
  padding-left: 36px;
}

/* Правая панель - временная шкала */
.gantt-timeline {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* Хедер временной шкалы */
.gantt-timeline-header {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
  display: flex;
}

.gantt-timeline-months {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.gantt-month {
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-color);
}

.gantt-timeline-days {
  display: flex;
}

.gantt-day {
  width: 40px;
  min-width: 40px;
  padding: 6px 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  border-right: 1px solid var(--border-light);
}

.gantt-day.weekend {
  background: rgba(0, 0, 0, 0.05);
}

.gantt-day.today {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  font-weight: 600;
}

/* Тело диаграммы */
.gantt-timeline-body {
  position: relative;
}

.gantt-row {
  height: 40px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.gantt-row.weekend {
  background: rgba(0, 0, 0, 0.02);
}

/* Бар задачи */
.gantt-bar {
  position: absolute;
  height: 24px;
  top: 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  color: white;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--transition-fast);
  min-width: 20px;
}

.gantt-bar:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow);
}

.gantt-bar.selected {
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

/* Прогресс внутри бара */
.gantt-bar-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px 0 0 4px;
}

/* Ресайз хендлеры */
.gantt-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.gantt-bar:hover .gantt-bar-handle {
  opacity: 1;
}

.gantt-bar-handle-left {
  left: 0;
}

.gantt-bar-handle-right {
  right: 0;
}

/* Связи между задачами */
.gantt-link {
  position: absolute;
  pointer-events: none;
}

.gantt-link-line {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  fill: none;
}

.gantt-link-arrow {
  fill: var(--text-muted);
}

/* Линия "сегодня" */
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 5;
}

.gantt-today-marker {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Тултип */
.gantt-tooltip {
  position: fixed;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-width: 300px;
  pointer-events: none;
}

.gantt-tooltip-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.gantt-tooltip-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.gantt-tooltip-label {
  color: var(--text-muted);
}

.gantt-tooltip-value {
  color: var(--text-primary);
}

/* Адаптив */
@media (max-width: 1024px) {
  .gantt-sidebar {
    width: 200px;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .gantt-sidebar {
    display: none;
  }
  
  .gantt-day {
    width: 30px;
    min-width: 30px;
  }
}

/**
 * Стили фильтров
 * Автор: Каюмов А.Р., 2025
 */

/* Панель фильтров */
.filters-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

.filters-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.filters-header:hover {
  background: var(--bg-hover);
}

.filters-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.filters-count {
  background: var(--primary);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
}

.filters-toggle {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.filters-panel.collapsed .filters-toggle {
  transform: rotate(-90deg);
}

.filters-content {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filters-panel.collapsed .filters-content {
  display: none;
}

/* Группа фильтров */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.filter-select {
  min-width: 150px;
}

/* Чипсы активных фильтров */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  font-size: 12px;
  color: var(--text-primary);
}

.filter-chip-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
}

.filter-chip-remove:hover {
  background: var(--danger);
  color: white;
}

.clear-filters-btn {
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.clear-filters-btn:hover {
  text-decoration: underline;
}

/* Быстрые фильтры */
.quick-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.quick-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-filter:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.quick-filter.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.quick-filter-icon {
  font-size: 16px;
}

.quick-filter-count {
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
}

.quick-filter.active .quick-filter-count {
  background: var(--primary);
  color: white;
}

/* Поиск */
.search-box {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}

.search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Результаты поиска */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--bg-hover);
}

.search-result-type {
  font-size: 16px;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-title mark {
  background: rgba(99, 102, 241, 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.search-result-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.search-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Сохранённые фильтры */
.saved-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--border-color);
}

.saved-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.saved-filter:hover {
  background: var(--bg-hover);
}

.saved-filter-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.saved-filter-delete {
  opacity: 0;
  color: var(--text-muted);
  cursor: pointer;
}

.saved-filter:hover .saved-filter-delete {
  opacity: 1;
}

/* Адаптив */
@media (max-width: 768px) {
  .filters-content {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .quick-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  
  .quick-filter {
    flex-shrink: 0;
  }
}

/**
 * Стили личного кабинета
 * Автор: Каюмов А.Р., 2025
 */

.profile-page {
  max-width: 1200px;
  margin: 0 auto;
}

/* Шапка профиля */
.profile-header {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.profile-header-bg {
  height: 160px;
  background: linear-gradient(135deg, var(--primary) 0%, #818cf8 50%, #a78bfa 100%);
}

.profile-header-content {
  display: flex;
  gap: 24px;
  padding: 0 32px 24px;
  margin-top: -60px;
  position: relative;
}

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 4px solid var(--card-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-letter {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(129, 140, 248, 0.2) 100%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--transition);
}

.profile-avatar:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-overlay span:first-child {
  font-size: 24px;
}

.profile-status {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.profile-status.online {
  color: var(--success);
  background: rgba(34, 197, 94, 0.1);
}

.profile-info {
  padding-top: 68px;
}

.profile-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.profile-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

.role-admin {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
}

.role-manager {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.role-user {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.role-viewer {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.profile-meta-item {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Статистика */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.profile-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  text-align: center;
  transition: all var(--transition);
}

.profile-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.profile-stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.profile-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.profile-stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Основной контент */
.profile-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
}

.profile-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.profile-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

/* Формы */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

/* Настройки */
.profile-settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition);
}

.profile-setting-item:hover {
  background: var(--bg-hover);
}

.profile-setting-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-setting-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.profile-setting-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Toggle switch */
.toggle {
  appearance: none;
  width: 44px;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
}

.toggle::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--transition);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle:checked {
  background: var(--primary);
}

.toggle:checked::before {
  transform: translateX(20px);
}

/* График активности */
.activity-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 120px;
  padding: 16px 0;
}

.activity-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.activity-bar {
  width: 24px;
  background: linear-gradient(180deg, var(--primary) 0%, #818cf8 100%);
  border-radius: 4px 4px 0 0;
  min-height: 5px;
  position: relative;
  transition: height var(--transition);
}

.activity-bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.activity-bar-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Достижения */
.profile-achievements {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  transition: all var(--transition);
}

.achievement-item.locked {
  opacity: 0.5;
  filter: grayscale(1);
}

.achievement-item.unlocked {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.achievement-icon {
  font-size: 24px;
}

.achievement-info {
  flex: 1;
}

.achievement-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.achievement-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.achievement-check {
  color: var(--success);
  font-weight: bold;
}

/* Горячие клавиши */
.profile-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.shortcut-item span {
  margin-left: auto;
}

kbd {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  color: var(--text-primary);
}

/* Сила пароля */
.password-strength {
  margin-top: -8px;
}

.password-strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-tertiary);
  transition: all var(--transition);
}

.password-strength-bar.weak { background: var(--danger); }
.password-strength-bar.medium { background: var(--warning); }
.password-strength-bar.good { background: #84cc16; }
.password-strength-bar.strong { background: var(--success); }

.password-strength-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

/* Адаптивность */
@media (max-width: 1024px) {
  .profile-content {
    grid-template-columns: 1fr;
  }
  
  .profile-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .profile-header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px 24px;
  }
  
  .profile-info {
    padding-top: 16px;
  }
  
  .profile-meta {
    justify-content: center;
  }
  
  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .profile-stats {
    grid-template-columns: 1fr;
  }
  
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .profile-avatar-letter {
    font-size: 36px;
  }
}

/**
 * Стили личных чатов
 * Автор: Каюмов А.Р., 2025
 */

/* Кнопка в сайдбаре */
#chat-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

#chat-section .sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 12px;
  margin-bottom: 8px;
}

/* Кнопка чата в header */
.chat-header-btn {
  position: relative;
  font-size: 18px;
}

.chat-header-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: badge-pulse 2s ease-in-out infinite;
}

.chat-header-badge.hidden {
  display: none;
}

.chat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
}

.chat-toggle:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}

.chat-toggle:active {
  transform: scale(0.98);
}

.chat-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  animation: badge-pulse 2s ease-in-out infinite;
}

.chat-badge.hidden {
  display: none;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Панель чата */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.chat-panel {
  width: 90vw;
  max-width: 900px;
  height: 80vh;
  max-height: 700px;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

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

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.chat-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.chat-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.chat-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Тело чата */
.chat-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Сайдбар с диалогами */
.chat-sidebar {
  width: 280px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.chat-search {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.chat-search .input {
  width: 100%;
  background: var(--bg-primary);
}

.chat-conversations {
  flex: 1;
  overflow-y: auto;
}

.chat-no-conversations {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.chat-conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.chat-conversation-item:hover {
  background: var(--bg-hover);
}

.chat-conversation-item.active {
  background: var(--bg-hover);
  border-left-color: var(--primary-color);
}

.chat-conversation-item.unread {
  background: rgba(99, 102, 241, 0.08);
}

.chat-conv-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-conv-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-conv-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
  border: 2px solid var(--bg-secondary);
}

.chat-conv-status.online {
  background: #22c55e;
}

.chat-conv-info {
  flex: 1;
  min-width: 0;
}

.chat-conv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.chat-conv-name {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-time {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.chat-conv-preview {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-new-btn {
  margin: 12px;
}

/* Основная область чата */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.chat-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.chat-empty-text {
  font-size: 16px;
}

/* Заголовок диалога */
.chat-conversation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.chat-conv-online-status {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Сообщения */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
}

[data-theme="dark"] .chat-messages {
  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
}

.chat-loading,
.chat-no-messages {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px;
}

.chat-message {
  display: flex;
  gap: 10px;
  max-width: 75%;
  animation: messageIn 0.2s ease;
}

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

.chat-message.mine {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat-message.theirs {
  margin-right: auto;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.message-content {
  background: linear-gradient(135deg, #e8eaed 0%, #d4d7dc 100%);
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  color: #1a1a2e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-message.mine .message-content {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Тёмная тема */
[data-theme="dark"] .message-content {
  background: linear-gradient(135deg, #3a3f4b 0%, #2d323c 100%);
  color: #e4e6eb;
}

[data-theme="dark"] .chat-message.mine .message-content {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
}

.message-text {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
}

.message-status {
  font-size: 11px;
  opacity: 0.7;
}

.message-status.read {
  color: #22c55e;
  opacity: 1;
}

.chat-message.mine .message-status.read {
  color: #a5f3fc;
}

/* Typing индикатор */
.chat-typing {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.chat-typing.hidden {
  display: none;
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Поле ввода */
.chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.chat-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  color: var(--text-primary);
  transition: border-color 0.2s;
}

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

.chat-send {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Модалка нового диалога */
.chat-panel .modal-overlay {
  z-index: 10001;
}

.chat-new-modal {
  width: 400px;
  max-height: 500px;
  z-index: 10002;
}

.chat-new-modal .modal-content {
  padding: 16px;
}

.chat-users-list {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.chat-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.chat-user-item:hover {
  background: var(--bg-hover);
}

.chat-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.chat-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-user-info {
  flex: 1;
}

.chat-user-name {
  font-weight: 500;
  font-size: 14px;
}

.chat-user-email {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Адаптивность */
@media (max-width: 768px) {
  .chat-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .chat-sidebar {
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }

  .chat-sidebar.hidden {
    transform: translateX(-100%);
  }

  .chat-main {
    position: absolute;
    inset: 0;
  }

  .chat-message {
    max-width: 85%;
  }
}

/**
 * Стили базы знаний (Wiki)
 * Автор: Каюмов А.Р., 2025
 */

.wiki-page {
  display: flex;
  height: calc(100vh - var(--header-height) - 48px);
  background: var(--bg-primary);
}

/* Боковая панель */
.wiki-sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.wiki-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wiki-sidebar-actions {
  display: flex;
  gap: 4px;
}

.wiki-sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.wiki-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.wiki-search .input {
  width: 100%;
}

.wiki-search-results {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.wiki-search-results.hidden {
  display: none;
}

.wiki-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
}

.wiki-search-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.wiki-search-item:last-child {
  border-bottom: none;
}

.wiki-search-item:hover {
  background: var(--bg-secondary);
}

.wiki-search-item-title {
  font-weight: 500;
  color: var(--text-primary);
}

.wiki-search-item-excerpt {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.wiki-search-item-author {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Дерево страниц */
.wiki-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.wiki-tree-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.wiki-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.wiki-folder-toggle {
  font-size: 10px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
  cursor: pointer;
}

.wiki-folder-toggle:hover {
  color: var(--text-primary);
}

.wiki-tree-item:hover {
  background: var(--bg-secondary);
}

.wiki-tree-item.active {
  background: var(--primary-color-10);
  border-left-color: var(--primary-color);
}

/* Drag and Drop */
.wiki-tree-item.dragging {
  opacity: 0.5;
  background: var(--bg-secondary);
}

.wiki-tree-item.drag-over {
  background: var(--primary-color-10);
  border: 2px dashed var(--primary-color);
  border-left-width: 3px;
}

.wiki-tree-item.drag-over-top {
  border-top: 2px solid var(--primary-color);
}

.wiki-tree-item.drag-over-bottom {
  border-bottom: 2px solid var(--primary-color);
}

.wiki-tree-icon {
  font-size: 14px;
}

.wiki-tree-title {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-tree-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 10px;
}

.wiki-search-result {
  flex-direction: column;
  align-items: flex-start;
}

.wiki-search-excerpt {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Контент */
.wiki-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

/* Пустое состояние */
.wiki-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.wiki-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.wiki-empty-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.wiki-empty-text {
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

.wiki-empty-actions {
  display: flex;
  gap: 12px;
}

/* Хлебные крошки */
.wiki-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}

.wiki-breadcrumb {
  color: var(--text-muted);
  text-decoration: none;
}

.wiki-breadcrumb:hover {
  color: var(--primary-color);
}

.wiki-breadcrumb-sep {
  color: var(--text-muted);
}

/* Содержимое папки */
.wiki-folder-contents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.wiki-folder-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.wiki-folder-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.wiki-folder-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wiki-folder-item-icon {
  font-size: 24px;
}

.wiki-folder-item-info {
  flex: 1;
}

.wiki-folder-item-title {
  font-weight: 500;
  color: var(--text-primary);
}

.wiki-folder-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Страница */
.wiki-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.wiki-page-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.wiki-page-meta {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.wiki-page-actions {
  display: flex;
  gap: 8px;
}

.wiki-linked-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.wiki-linked-label {
  font-size: 13px;
  color: var(--text-muted);
}

.wiki-linked-task {
  font-size: 13px;
  color: var(--primary-color);
  text-decoration: none;
  padding: 4px 8px;
  background: var(--primary-color-10);
  border-radius: 4px;
}

.wiki-linked-task:hover {
  background: var(--primary-color-20);
}

/* Контент страницы */
.wiki-page-content {
  line-height: 1.8;
  font-size: 15px;
  color: var(--text-primary);
}

.wiki-page-content h1 {
  font-size: 24px;
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.wiki-page-content h2 {
  font-size: 20px;
  margin: 28px 0 12px;
}

.wiki-page-content h3 {
  font-size: 17px;
  margin: 24px 0 10px;
}

.wiki-page-content p {
  margin: 0 0 16px;
}

.wiki-page-content code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
}

.wiki-page-content pre {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}

.wiki-page-content pre code {
  background: none;
  padding: 0;
}

.wiki-page-content ul {
  margin: 16px 0;
  padding-left: 24px;
}

.wiki-page-content li {
  margin: 8px 0;
}

.wiki-page-content a {
  color: var(--primary-color);
  text-decoration: none;
}

.wiki-page-content a:hover {
  text-decoration: underline;
}

.wiki-page-content img.wiki-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: zoom-in;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wiki-page-content img.wiki-image:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wiki-page-content video {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wiki-task-link,
.wiki-page-link {
  color: var(--primary-color);
  background: var(--primary-color-10);
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
}

.wiki-task-link:hover,
.wiki-page-link:hover {
  background: var(--primary-color-20);
  text-decoration: none;
}

/* Редактор */
.wiki-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wiki-editor-header {
  margin-bottom: 16px;
}

.wiki-editor-title {
  font-size: 24px;
  font-weight: 600;
  border: none;
  background: transparent;
  width: 100%;
  padding: 8px 0;
  border-bottom: 2px solid var(--border-color);
}

.wiki-editor-title:focus {
  outline: none;
  border-bottom-color: var(--primary-color);
}

.wiki-editor-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border-color);
  border-bottom: none;
}

.wiki-toolbar-btn {
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.wiki-toolbar-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.wiki-toolbar-btn.active {
  background: var(--primary-color);
  color: white;
}

.wiki-toolbar-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 12px;
}

.wiki-editor-body {
  flex: 1;
  display: flex;
  min-height: 300px;
}

.wiki-editor-textarea {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  padding: 16px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  background: var(--card-bg);
  color: var(--text-primary);
}

.wiki-editor-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.wiki-editor-preview {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  padding: 16px;
  background: var(--card-bg);
  overflow-y: auto;
}

.wiki-editor-preview.hidden {
  display: none;
}

.wiki-editor-footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* История */
.wiki-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wiki-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.wiki-history-version {
  font-weight: 600;
  color: var(--text-primary);
}

.wiki-history-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.wiki-history-summary {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  font-style: italic;
}

.wiki-history-actions {
  display: flex;
  gap: 8px;
}

/* Связь с задачами */
.wiki-task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  background: var(--bg-secondary);
  margin-top: 8px;
}

.wiki-task-list:empty {
  display: none;
}

.wiki-task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  background: var(--card-bg);
  border: 1px solid transparent;
}

.wiki-task-item:hover {
  background: var(--primary-color-10);
  border-color: var(--primary-color);
}

.wiki-task-number {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 13px;
  min-width: 50px;
}

.wiki-task-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

/* Разделитель в тулбаре */
.wiki-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
}

/* Таблицы */
.wiki-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.wiki-table th,
.wiki-table td {
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  text-align: left;
}

.wiki-table th {
  background: var(--bg-secondary);
  font-weight: 600;
}

.wiki-table tr:hover td {
  background: var(--bg-hover);
}

/* Чекбоксы */
.wiki-checkbox {
  list-style: none;
}

.wiki-checkbox.checked {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Цитаты */
.wiki-page-content blockquote {
  border-left: 4px solid var(--primary-color);
  padding: 12px 16px;
  margin: 16px 0;
  background: var(--bg-secondary);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-secondary);
}

/* Зачёркнутый текст */
.wiki-page-content del {
  color: var(--text-muted);
}

/* Адаптивность */
@media (max-width: 768px) {
  .wiki-page {
    flex-direction: column;
  }
  
  .wiki-sidebar {
    width: 100%;
    min-width: auto;
    max-height: 40vh;
  }
  
  .wiki-content {
    padding: 16px;
  }
  
  .wiki-page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .wiki-page-actions {
    flex-wrap: wrap;
  }
}

/**
 * Стили планирования спринтов
 * Автор: Каюмов А.Р., 2025
 */

.sprint-planning-page {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.sprint-planning-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.sprint-planning-title h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.sprint-planning-title .text-muted {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.sprint-planning-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sprint-planning-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
}

/* Backlog */
.sprint-backlog {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

.sprint-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.sprint-section-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.sprint-section-count {
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sprint-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sprint-filters .input,
.sprint-filters .select {
  flex: 1;
}

.input-sm,
.select-sm {
  padding: 6px 10px;
  font-size: 0.85rem;
}

.sprint-task-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  min-height: 100px;
  border-radius: 8px;
  transition: background 0.2s;
}

.sprint-task-list.drag-over {
  background: var(--primary-light);
  border: 2px dashed var(--primary);
}

.sprint-tasks-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Task Card */
.sprint-task-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 12px;
  cursor: grab;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sprint-task-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.sprint-task-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.sprint-task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sprint-task-number {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.sprint-task-priority {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  font-weight: 500;
}

.sprint-task-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 8px;
}

.sprint-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sprint-task-assignee {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sprint-task-points {
  background: var(--primary);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.sprint-task-project {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Sprint Boards */
.sprint-boards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sprint-board {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
}

.sprint-board.active-sprint {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--primary-rgb), 0.05) 100%);
  border: 2px solid var(--primary);
}

.sprint-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sprint-board-info h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 8px 0 4px 0;
  color: var(--text-primary);
}

.sprint-dates {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sprint-days-left {
  font-weight: 500;
}

.sprint-goal {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 8px;
  font-style: italic;
}

.sprint-board-actions {
  display: flex;
  gap: 8px;
}

/* Status Badge */
.sprint-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sprint-status-badge.planned {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.sprint-status-badge.active {
  background: var(--success);
  color: white;
}

.sprint-status-badge.completed {
  background: var(--text-muted);
  color: white;
}

/* Progress */
.sprint-progress {
  margin-bottom: 16px;
}

.sprint-progress-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sprint-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.sprint-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Sprint Card */
.sprint-card {
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.sprint-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sprint-card.completed {
  opacity: 0.7;
}

.sprint-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sprint-card-info h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 6px 0 4px 0;
}

.sprint-card-dates {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sprint-card-actions {
  display: flex;
  gap: 4px;
}

.sprint-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sprint-card-goal {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}

.sprint-task-list.mini {
  margin-top: 12px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  max-height: none;
  overflow: visible;
}

.sprint-task-mini {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprint-task-more {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Section */
.sprint-section {
  margin-top: 24px;
}

.sprint-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.sprint-section-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
}

.sprint-section-toggle:hover h3 {
  color: var(--primary);
}

.toggle-icon {
  transition: transform 0.2s;
}

.sprint-section.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.sprint-section.collapsed .sprint-section-content {
  display: none;
}

/* Empty State */
.sprint-empty-active {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border-color);
}

.sprint-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.sprint-empty-text {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Sprint Details Modal */
.sprint-details {
  padding: 8px 0;
}

.sprint-details-info {
  margin-bottom: 24px;
}

.sprint-details-info p {
  margin: 8px 0;
  color: var(--text-secondary);
}

.sprint-details-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.sprint-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.sprint-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.sprint-stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.sprint-details-tasks {
  max-height: 300px;
  overflow-y: auto;
}

.sprint-detail-task {
  display: grid;
  grid-template-columns: 60px 1fr 120px 100px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  align-items: center;
}

.sprint-detail-task.done {
  opacity: 0.6;
  text-decoration: line-through;
}

.sprint-detail-task .task-number {
  color: var(--text-muted);
  font-weight: 500;
}

.sprint-detail-task .task-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sprint-detail-task .task-assignee {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
}

/* Complete Options */
.sprint-complete-options {
  margin-top: 16px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.radio-option:hover {
  background: var(--bg-tertiary);
}

.radio-option input {
  width: 18px;
  height: 18px;
}

/* Form Hint */
.form-hint {
  padding: 12px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-hint .text-warning {
  font-size: 1.2rem;
}

/* Sprint Modal Form */
.modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.modal .form-group {
  margin-bottom: 16px;
}

.modal .form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.modal .input,
.modal .select,
.modal .textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal .input:focus,
.modal .select:focus,
.modal .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.modal .textarea {
  resize: vertical;
  min-height: 60px;
}

.modal-md {
  width: 480px;
  max-width: 95vw;
}

/* Completed Sprint Tasks */
.sprint-completed-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: 6px;
  margin-bottom: 6px;
  border-left: 3px solid var(--warning);
}

.sprint-completed-task.done {
  border-left-color: var(--success);
  opacity: 0.7;
}

.sprint-completed-task.incomplete {
  border-left-color: var(--warning);
}

.sprint-completed-task-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.sprint-completed-task .sprint-task-number {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sprint-completed-task .sprint-task-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprint-completed-task.done .sprint-task-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.sprint-completed-task .sprint-task-status {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sprint-completed-task .sprint-task-status.done {
  background: var(--success);
  color: white;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* Sprint card completed */
.sprint-card.completed {
  opacity: 1;
  background: var(--bg-secondary);
}

.sprint-card.completed .sprint-task-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

/* Active Sprint Task */
.sprint-active-task {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--warning);
  transition: all 0.2s;
  cursor: grab;
}

.sprint-active-task:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sprint-active-task.done {
  border-left-color: var(--success);
  background: rgba(var(--success-rgb), 0.03);
}

.sprint-active-task.done .sprint-task-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.sprint-active-task-main {
  flex: 1;
  min-width: 0;
}

.sprint-active-task-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sprint-task-status-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.sprint-task-status-badge.done {
  background: var(--success);
  color: white;
}

.sprint-task-status-badge.in-progress {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.sprint-active-task-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

.sprint-active-task-details .detail-item {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 3px 8px;
  border-radius: 4px;
}

.sprint-active-task-details .detail-item.time {
  background: var(--primary-light);
  color: var(--primary);
}

.sprint-task-remove {
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.sprint-active-task:hover .sprint-task-remove {
  opacity: 1;
}

.sprint-task-assignee.unassigned {
  color: var(--text-muted);
  font-style: italic;
}

/* Report Styles */
.sprint-report {
  padding: 8px 0;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.report-card {
  text-align: center;
  padding: 20px 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.report-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}

.report-card-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.report-card-percent {
  font-size: 0.9rem;
  color: var(--success);
  font-weight: 600;
  margin-top: 4px;
}

.report-section {
  margin-top: 24px;
}

.report-section h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.report-table {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 8px;
}

.report-row {
  display: grid;
  grid-template-columns: 1fr 100px 80px 80px 100px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

.report-row:last-child {
  border-bottom: none;
}

.report-row-name {
  font-weight: 500;
  color: var(--text-primary);
}

.report-row-stat {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.report-row-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.report-row-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 3px;
}

.report-incomplete {
  max-height: 200px;
  overflow-y: auto;
}

.report-incomplete-task {
  display: grid;
  grid-template-columns: 60px 1fr 100px 100px;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.report-incomplete-task span:first-child {
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .report-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .report-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .report-incomplete-task {
    grid-template-columns: 1fr;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .sprint-planning-content {
    grid-template-columns: 1fr;
  }

  .sprint-backlog {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .sprint-planning-header {
    flex-direction: column;
  }

  .sprint-planning-actions {
    width: 100%;
    flex-direction: column;
  }

  .sprint-planning-actions .select,
  .sprint-planning-actions .btn {
    width: 100%;
  }

  .sprint-details-stats {
    grid-template-columns: 1fr;
  }

  .sprint-detail-task {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/**
 * Стили Покер-планирования (Приоритизация голосованием)
 * Автор: Каюмов А.Р., 2025
 */

.voting-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.voting-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.voting-title h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.voting-title .text-muted {
  color: var(--text-secondary);
}

.voting-actions {
  display: flex;
  gap: 12px;
}

/* Empty State */
.voting-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-secondary);
  border-radius: 16px;
}

.voting-empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.voting-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.voting-empty-text {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* Status Bar */
.voting-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(99, 102, 241, 0.05) 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  gap: 24px;
  flex-wrap: wrap;
}

.voting-status-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.voting-status-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.voting-status-badge.active {
  background: var(--success);
  color: white;
}

.voting-status-badge.urgent {
  background: var(--danger);
  color: white;
  animation: pulse 1s infinite;
}

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

.voting-period {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Balance */
.voting-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-primary);
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.balance-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.balance-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.balance-remaining {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}

.balance-remaining.empty {
  color: var(--text-muted);
}

.balance-total {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.balance-bar {
  width: 100px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.balance-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Controls */
.voting-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.voting-filters {
  display: flex;
  gap: 12px;
  flex: 1;
}

.voting-filters .input {
  max-width: 300px;
}

.voting-filters .select {
  width: 180px;
}

.voting-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.voting-sort .btn.active {
  background: var(--primary);
  color: white;
}

/* Task Cards */
.voting-tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voting-task-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.voting-task-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.voting-task-card.voted {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(99, 102, 241, 0.05) 100%);
}

/* Rank */
.voting-rank {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.voting-rank.top {
  background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
  color: #000;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Task Main */
.voting-task-main {
  flex: 1;
  min-width: 0;
}

.voting-task-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.voting-task-number {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.voting-task-customer {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 10px;
  font-weight: 500;
}

.voting-task-blockers {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: rgba(var(--warning-rgb), 0.1);
  color: var(--warning);
  border-radius: 10px;
  cursor: help;
}

.voting-task-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.voting-task-stats {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.stat-votes {
  font-weight: 600;
  color: var(--primary);
}

/* Vote Input */
.voting-task-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.vote-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

.vote-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.2s;
}

.vote-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

.vote-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.vote-input {
  width: 50px;
  height: 36px;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  color: var(--text-primary);
}

.vote-input:focus {
  outline: none;
}

.vote-label {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 500;
}

.voting-no-tasks {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

/* Create Voting Modal */
.voting-create-modal {
  width: 640px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.voting-create-modal .modal-body {
  overflow-y: auto;
  padding: 20px 24px;
}

/* Settings Row */
.vcm-settings {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.vcm-setting label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.vcm-setting .input {
  width: 100%;
}

/* Sections */
.vcm-section {
  margin-bottom: 24px;
}

.vcm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vcm-section-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.vcm-section-count {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
}

/* Search Box */
.vcm-search-box {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.vcm-search-box .input {
  flex: 1;
}

/* Chips */
.vcm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.vcm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--primary);
  color: white;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 500;
}

.vcm-chip-remove {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
}

.vcm-chip-remove:hover {
  opacity: 1;
}

/* Dropdown */
.vcm-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.vcm-section:has(#users-dropdown) {
  position: relative;
}

.vcm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.vcm-dropdown-item:hover {
  background: var(--bg-secondary);
}

.vcm-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.vcm-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Tasks List */
.vcm-tasks-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
}

.vcm-task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.vcm-task-row:last-child {
  border-bottom: none;
}

.vcm-task-row:hover {
  background: var(--bg-secondary);
}

.vcm-task-row:has(input:checked) {
  background: rgba(99, 102, 241, 0.08);
}

.vcm-task-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.vcm-task-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.vcm-task-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vcm-task-customer {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Users List */
.vcm-users-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 12px;
  background: var(--bg-primary);
}

.vcm-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.vcm-user-row:last-child {
  border-bottom: none;
}

.vcm-user-row:hover {
  background: var(--bg-secondary);
}

.vcm-user-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.vcm-user-name {
  flex: 1;
  font-weight: 500;
}

.vcm-user-email {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.vcm-section-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 8px;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Voting Report Modal */
.voting-report-modal {
  width: 900px;
  max-width: 95vw;
}

.modal-xl {
  max-height: 85vh;
}

.voting-report-table-wrapper {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.voting-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.voting-report-table th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.voting-report-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}

.voting-report-table tbody tr:hover {
  background: var(--bg-secondary);
}

.voting-report-table .winner-row {
  background: rgba(255, 215, 0, 0.1);
}

.voting-report-table .winner-row:hover {
  background: rgba(255, 215, 0, 0.15);
}

.voting-report-table .rank-cell {
  width: 40px;
  text-align: center;
  font-weight: 600;
}

.voting-report-table .winner-row .rank-cell {
  color: #ff9500;
}

.voting-report-table .number-cell {
  color: var(--primary);
  font-weight: 500;
  white-space: nowrap;
}

.voting-report-table .title-cell {
  max-width: 250px;
}

.voting-report-table .votes-cell {
  text-align: right;
  color: var(--primary);
}

/* Top Results */
.voting-top-empty {
  padding: 20px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.voting-top-results {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  color: white;
}

.voting-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.voting-top-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.voting-top-subtitle {
  font-size: 0.85rem;
  opacity: 0.7;
}

.voting-top-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voting-top-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: transform 0.2s;
}

.voting-top-item:hover {
  transform: translateX(4px);
}

.voting-top-item.winner {
  background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,180,0,0.1) 100%);
  border: 1px solid rgba(255,215,0,0.3);
}

.top-rank {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.top-info {
  flex: 1;
  min-width: 0;
}

.top-task-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.top-task-number {
  font-size: 0.8rem;
  opacity: 0.7;
}

.top-task-title {
  font-weight: 500;
}

.top-task-customer {
  font-size: 0.75rem;
  background: rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.top-progress {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.top-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff9500);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.top-votes {
  text-align: right;
  min-width: 80px;
}

.top-votes strong {
  display: block;
  font-size: 1.5rem;
  color: #ffd700;
}

.top-votes span {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Final Results Modal */
.voting-results-modal {
  width: 600px;
}

.voting-winner {
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, #ffd700 0%, #ff9500 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  color: #000;
}

.winner-badge {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.winner-task {
  margin-bottom: 8px;
}

.winner-number {
  font-size: 0.9rem;
  opacity: 0.7;
}

.winner-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4px;
}

.winner-votes {
  font-size: 2rem;
  font-weight: 700;
}

.winner-hint {
  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0.8;
}

.voting-final-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.voting-final-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.voting-final-item.first {
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.3);
}

.final-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.85rem;
}

.voting-final-item.first .final-rank {
  background: #ffd700;
  color: #000;
}

.final-number {
  font-size: 0.8rem;
  color: var(--text-muted);
  width: 50px;
}

.final-title {
  flex: 1;
  font-weight: 500;
}

.final-votes {
  font-weight: 600;
  color: var(--primary);
}

/* Current Results Modal */
.voting-participants-stats {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.voting-participants-stats h4 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.participant-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 2px solid transparent;
}

.participant-card.done {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.05);
}

.participant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.participant-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.9rem;
}

.participant-status {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.participant-card.done .participant-status {
  color: var(--success);
  font-weight: 500;
}

/* Current Results List */
.voting-current-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.current-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.current-result-item.leader {
  background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,180,0,0.05) 100%);
  border: 1px solid rgba(255,215,0,0.3);
}

.result-pos {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
}

.current-result-item.leader .result-pos {
  background: #ffd700;
  color: #000;
}

.result-task-info {
  flex: 1;
  min-width: 0;
}

.result-task-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.result-task-num {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.result-task-title {
  font-weight: 500;
  font-size: 0.9rem;
}

.result-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.result-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 3px;
  transition: width 0.3s;
}

.current-result-item.leader .result-bar-fill {
  background: linear-gradient(90deg, #ffd700, #ff9500);
}

.result-votes-info {
  text-align: right;
  min-width: 70px;
}

.result-votes-info strong {
  display: block;
  font-size: 1.25rem;
  color: var(--primary);
}

.current-result-item.leader .result-votes-info strong {
  color: #ff9500;
}

.result-votes-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Balance Done */
.balance-done {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 500;
  margin-left: 8px;
}

@media (max-width: 600px) {
  .voting-settings-grid {
    grid-template-columns: 1fr;
  }
  
  .voting-top-item {
    flex-wrap: wrap;
  }
  
  .top-votes {
    width: 100%;
    text-align: left;
    margin-top: 8px;
  }
}

/* History */
.voting-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voting-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.history-dates {
  font-weight: 600;
}

.history-stats {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Results */
.voting-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voting-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.result-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
}

.result-rank.top {
  background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
  color: #000;
}

.result-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-number {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.result-title {
  font-weight: 500;
}

.result-customer {
  font-size: 0.75rem;
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--text-secondary);
}

.result-votes {
  text-align: right;
}

.result-votes strong {
  font-size: 1.1rem;
  color: var(--primary);
}

.result-voters {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .voting-status-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .voting-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .voting-filters {
    flex-direction: column;
  }

  .voting-filters .input,
  .voting-filters .select {
    max-width: none;
    width: 100%;
  }

  .voting-sort {
    justify-content: center;
    flex-wrap: wrap;
  }

  .voting-task-card {
    flex-direction: column;
    align-items: stretch;
  }

  .voting-rank {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .voting-task-vote {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }
}
/**
 * Стили страницы отчётов
 * Автор: Каюмов А.Р., 2025
 */

.reports-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Заголовок */
.reports-header {
  margin-bottom: 24px;
}

.reports-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.reports-subtitle {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
}

/* Навигация по отчётам */
.reports-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.reports-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.reports-nav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.reports-nav-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.reports-nav-icon {
  font-size: 18px;
}

/* Фильтры */
.reports-filters {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.reports-filters-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

/* Мультиселект */
.multi-select {
  position: relative;
  min-width: 180px;
}

.multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.multi-select-trigger:hover {
  border-color: var(--primary);
}

.multi-select-text {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-select-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.multi-select-dropdown.open + .multi-select-trigger .multi-select-arrow,
.multi-select:has(.multi-select-dropdown.open) .multi-select-arrow {
  transform: rotate(180deg);
}

.multi-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  max-height: 300px;
  overflow: hidden;
}

.multi-select-dropdown.open {
  display: block;
}

.multi-select-search {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}

.multi-select-search input {
  width: 100%;
}

.multi-select-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.multi-select-actions .btn {
  font-size: 12px;
  padding: 4px 8px;
}

.multi-select-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 0;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}

.multi-select-option:hover {
  background: var(--bg-secondary);
}

.multi-select-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.option-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.option-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.option-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.option-status {
  font-size: 12px;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select,
.filter-input {
  min-width: 150px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  flex-direction: row;
  margin-left: auto;
}

/* Контент отчёта */
.reports-content {
  min-height: 400px;
}

.reports-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}

.reports-loading p {
  margin-top: 16px;
}

.reports-error {
  text-align: center;
  padding: 80px 20px;
  color: var(--danger);
}

/* Сводка */
.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.report-stat-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}

.report-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.report-stat-card.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-color: transparent;
  color: white;
}

.report-stat-card.primary .report-stat-label {
  color: rgba(255, 255, 255, 0.8);
}

.report-stat-card.success {
  border-color: var(--success);
  background: rgba(var(--success-rgb), 0.1);
}

.report-stat-card.warning {
  border-color: var(--warning);
  background: rgba(var(--warning-rgb), 0.1);
}

.report-stat-card.danger {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), 0.1);
}

.report-stat-card.info {
  border-color: var(--info);
  background: rgba(var(--info-rgb), 0.1);
}

.report-stat-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.report-stat-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.report-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Секции отчёта */
.report-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

.report-chart-container {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.report-table-container {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
  overflow-x: auto;
}

/* Таблица отчёта */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.report-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
}

.report-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.report-table tr:hover td {
  background: var(--bg-tertiary);
}

.report-table .text-success { color: var(--success); }
.report-table .text-danger { color: var(--danger); }
.report-table .text-warning { color: var(--warning); }
.report-table .text-info { color: var(--info); }
.report-table .text-muted { color: var(--text-muted); }

/* Графики */
.burndown-chart,
.flow-chart,
.velocity-chart {
  overflow-x: auto;
  padding: 16px 0;
}

.burndown-svg,
.flow-svg,
.velocity-svg {
  width: 100%;
  max-width: 900px;
  height: auto;
}

.chart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-style: italic;
}

.chart-legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
}

.legend-line.actual {
  background: var(--primary);
}

.legend-line.ideal {
  background: var(--text-muted);
  border-style: dashed;
}

.legend-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.legend-box.info { background: var(--info); }
.legend-box.success { background: var(--success); }

/* Грид для секций */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.report-section {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
}

/* Time bars */
.time-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time-bar-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-bar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.time-bar-project {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.project-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.time-bar-value {
  font-weight: 600;
  color: var(--primary);
}

.time-bar-track {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.time-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Efficiency bar */
.efficiency-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 150px;
}

.efficiency-fill {
  height: 8px;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.efficiency-fill.success { background: var(--success); }
.efficiency-fill.warning { background: var(--warning); }
.efficiency-fill.danger { background: var(--danger); }

.efficiency-value {
  font-weight: 600;
  font-size: 12px;
  min-width: 40px;
}

/* Task link */
.task-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.task-link:hover {
  text-decoration: underline;
}

/* Адаптивность */
@media (max-width: 768px) {
  .reports-page {
    padding: 16px;
  }

  .reports-nav {
    gap: 8px;
  }

  .reports-nav-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .reports-nav-text {
    display: none;
  }

  .reports-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    min-width: 100%;
  }

  .filter-actions {
    margin-left: 0;
    margin-top: 8px;
  }

  .report-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-stat-value {
    font-size: 28px;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Дашборд руководителя ===== */
.report-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dashboard-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border-color);
}

.dashboard-section.danger-section {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.dashboard-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.dashboard-stat-card {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dashboard-stat-card .stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.dashboard-stat-card .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.dashboard-stat-card.success .stat-value { color: var(--success); }
.dashboard-stat-card.danger .stat-value { color: var(--danger); }
.dashboard-stat-card.warning .stat-value { color: var(--warning); }
.dashboard-stat-card.active .stat-value { color: var(--info); }

.dashboard-stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Таблица проектов */
.dashboard-table-wrapper {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.dashboard-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dashboard-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.project-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.success-text { color: var(--success); font-weight: 600; }
.danger-text { color: var(--danger); font-weight: 600; }

.progress-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-progress {
  width: 80px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s;
}

/* Загрузка команды */
.team-load-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.team-member-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.team-member-card:hover {
  border-color: var(--primary);
}

.team-member-card.has-overdue {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.03);
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.member-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-stat {
  font-size: 11px;
  color: var(--text-muted);
}

.member-stat.danger { color: var(--danger); }
.member-stat.warning { color: var(--warning); }

.member-load {
  width: 60px;
}

.load-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.load-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.load-fill.low { background: var(--success); }
.load-fill.medium { background: var(--warning); }
.load-fill.high { background: var(--danger); }

/* Просроченные задачи */
.overdue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overdue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.overdue-item:hover {
  border-color: var(--danger);
  transform: translateX(4px);
}

.overdue-task {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.task-number {
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
}

.task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overdue-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.overdue-project {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  color: white;
}

.overdue-assignee {
  font-size: 12px;
  color: var(--text-muted);
}

.overdue-days {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

/* Спринты */
.sprints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sprint-card {
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.sprint-card.active {
  border-color: var(--success);
}

.sprint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sprint-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
}

.sprint-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.sprint-name {
  font-weight: 600;
}

.sprint-progress {
  margin-bottom: 10px;
}

.sprint-progress-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.sprint-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 4px;
  transition: width 0.3s;
}

.sprint-progress-text {
  font-size: 12px;
  color: var(--text-muted);
}

.sprint-dates {
  font-size: 12px;
  color: var(--text-muted);
}

.empty-text {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Кнопка успеха */
.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  background: #16a34a;
}

/* ==================== Отчёт "Задачи по исполнителю" ==================== */
.tasks-report {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tasks-report-filters {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.tasks-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.tasks-filters-actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.tasks-report-summary {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-secondary) 100%);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.summary-item {
  font-size: 14px;
  color: var(--text-secondary);
}

.summary-item strong {
  color: var(--primary);
  font-size: 16px;
}

.tasks-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.tasks-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tasks-report-table thead {
  background: var(--bg-tertiary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tasks-report-table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid var(--border-color);
}

.tasks-report-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.tasks-report-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.task-number {
  font-family: 'SF Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.task-title {
  max-width: 250px;
}

.task-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-link:hover {
  text-decoration: underline;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.tasks-report-table td.overdue {
  color: var(--danger);
  font-weight: 600;
}

.sprint-history-btn {
  background: var(--primary-light);
  color: var(--primary);
  border: none;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.sprint-history-btn:hover {
  background: var(--primary);
  color: white;
}

.article-link {
  font-size: 16px;
  text-decoration: none;
}

.article-link:hover {
  transform: scale(1.2);
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
}

.simple-table th,
.simple-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.simple-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 12px;
}

.reports-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}

/* ==================== Searchable Filters ==================== */
.filter-group-wide {
  grid-column: span 2;
}

.searchable-filter {
  position: relative;
}

.sf-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 6px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.sf-trigger:hover {
  border-color: var(--primary);
}

.sf-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sf-placeholder {
  color: var(--text-muted);
  font-size: 13px;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-chip-remove {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  opacity: 0.7;
}

.sf-chip-remove:hover {
  opacity: 1;
}

.sf-arrow {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
  transition: transform 0.2s;
}

.sf-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 100;
  display: none;
  max-height: 280px;
  overflow: hidden;
}

.sf-dropdown.open {
  display: block;
}

.sf-search {
  margin: 8px;
  width: calc(100% - 16px);
}

.sf-options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.sf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

.sf-option:hover {
  background: var(--bg-tertiary);
}

.sf-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sf-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Группировка по исполнителю */
.group-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  cursor: pointer;
  transition: background 0.2s;
}

.group-header:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #e0e7ff 100%) !important;
}

.group-header td {
  padding: 12px 10px !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: 1px solid #e2e8f0 !important;
}

.group-controls {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.group-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-toggle {
  font-size: 10px;
  color: var(--primary);
  transition: transform 0.2s;
}

.group-stats {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.group-stats span {
  background: white;
  padding: 2px 8px;
  border-radius: 4px;
}

/**
 * Стили модуля автоматизаций
 * Автор: Каюмов А.Р., 2025
 */

/* Основная страница */
.automations-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.automations-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.automations-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.automations-subtitle {
  color: var(--text-muted);
  margin-top: 4px;
}

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

.stat-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.stat-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Список автоматизаций */
.automations-list {
  display: grid;
  gap: 16px;
}

/* Карточка автоматизации */
.automation-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: all 0.2s;
}

.automation-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.automation-card.inactive {
  opacity: 0.6;
}

.automation-card.inactive:hover {
  opacity: 0.8;
}

.automation-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.automation-status {
  flex-shrink: 0;
}

.automation-info {
  flex: 1;
  min-width: 0;
}

.automation-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.automation-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.automation-menu {
  position: relative;
}

.automation-menu-btn {
  font-size: 18px;
}

.automation-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 100;
  display: none;
}

.automation-dropdown.open {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--bg-secondary);
}

.dropdown-item.danger {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-tertiary);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--success);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Тело карточки */
.automation-card-body {
  padding: 16px 20px;
}

.automation-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.trigger-icon {
  font-size: 18px;
}

.trigger-name {
  font-weight: 500;
  color: var(--text-primary);
}

.trigger-project {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  color: var(--text-muted);
}

.trigger-project.global {
  background: var(--primary-light);
  color: var(--primary);
}

.automation-conditions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.conditions-label {
  color: var(--warning);
}

.automation-actions-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.actions-label {
  font-size: 13px;
  color: var(--success);
}

.actions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-badge {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  color: var(--text-secondary);
}

.action-badge.more {
  background: var(--primary-light);
  color: var(--primary);
}

/* Футер карточки */
.automation-card-footer {
  padding: 12px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}

.automation-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== Редактор автоматизации ===== */
.automation-editor-modal .modal {
  max-width: 800px;
  max-height: 90vh;
}

.automation-editor .modal-body {
  max-height: calc(90vh - 140px);
  overflow-y: auto;
  padding: 0;
}

.editor-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.editor-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title .optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.section-title .btn {
  margin-left: auto;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group.flex-1 { flex: 1; }
.form-group.flex-2 { flex: 2; }

/* Триггеры */
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.trigger-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.trigger-option:hover {
  border-color: var(--primary-light);
}

.trigger-option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.trigger-option input {
  display: none;
}

.trigger-option .trigger-icon {
  font-size: 20px;
}

.trigger-option .trigger-name {
  font-size: 13px;
  font-weight: 500;
}

.trigger-config {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.config-row {
  display: flex;
  gap: 16px;
}

.config-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Условия */
.conditions-list,
.actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.condition-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-primary);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.condition-row .select,
.condition-row .input {
  flex: 1;
}

/* Действия */
.action-row {
  background: var(--bg-primary);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.action-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.action-icon {
  font-size: 18px;
}

.action-header .select {
  flex: 1;
}

.action-config {
  padding: 14px;
}

.action-config .select,
.action-config .input {
  width: 100%;
  margin-bottom: 10px;
}

.action-config .select:last-child,
.action-config .input:last-child {
  margin-bottom: 0;
}

.deadline-config {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.deadline-config .input-sm {
  width: 100px;
}

.notification-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-config textarea {
  min-height: 80px;
  resize: vertical;
}

/* ===== Модальное окно логов ===== */
.logs-modal .modal {
  max-width: 700px;
}

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.log-item {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  border-left: 3px solid var(--border-color);
}

.log-item.success {
  border-left-color: var(--success);
}

.log-item.error {
  border-left-color: var(--danger);
}

.log-item.skipped {
  border-left-color: var(--warning);
}

.log-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.log-status {
  font-size: 14px;
}

.log-task {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.log-time {
  font-size: 12px;
  color: var(--text-muted);
}

.log-error {
  font-size: 13px;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  padding: 8px 10px;
  border-radius: 6px;
  margin: 8px 0;
}

.log-details {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Empty state */
.automations-list .empty-state {
  padding: 60px 20px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border-color);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-text {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Адаптивность */
@media (max-width: 768px) {
  .automations-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .trigger-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .condition-row {
    flex-wrap: wrap;
  }
  
  .config-row {
    flex-direction: column;
  }
}