/* ============================================================
   Делорум — Дизайн-система
   Автор: Делорум
   ============================================================ */

/* ---------- CSS переменные: светлая тема (по умолчанию) ---------- */
:root {
  /* Акценты */
  --accent:           #7C3AED;
  --accent-hover:     #6D28D9;
  --accent-light:     #EDE9FE;
  --accent-text:      #4C1D95;
  --accent-2:         #0EA5E9;
  --accent-2-hover:   #0284C7;

  /* Фоны */
  --bg:               #F8F9FC;
  --bg-card:          #FFFFFF;
  --bg-sidebar:       #FFFFFF;
  --bg-input:         #FFFFFF;
  --bg-hover:         #F3F4F6;
  --bg-active:        #EDE9FE;
  --bg-overlay:       rgba(0,0,0,0.4);

  /* Границы */
  --border:           #E5E7EB;
  --border-focus:     #7C3AED;
  --border-error:     #EF4444;

  /* Текст */
  --text:             #111827;
  --text-secondary:   #6B7280;
  --text-muted:       #9CA3AF;
  --text-inverse:     #FFFFFF;
  --text-accent:      #7C3AED;
  --text-error:       #DC2626;
  --text-success:     #059669;
  --text-warning:     #D97706;

  /* Тени */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:           0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md:        0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-lg:        0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-accent:    0 4px 16px rgba(124,58,237,0.25);

  /* Приоритеты задач */
  --priority-low:      #9CA3AF;
  --priority-normal:   #3B82F6;
  --priority-high:     #F59E0B;
  --priority-critical: #EF4444;

  /* Статусы */
  --status-todo:      #6B7280;
  --status-work:      #7C3AED;
  --status-paused:    #F59E0B;
  --status-review:    #0EA5E9;
  --status-done:      #10B981;

  /* Размеры */
  --radius-sm:        6px;
  --radius:           10px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  --sidebar-width:    260px;
  --header-h:         60px;
  --bottombar-h:      64px;

  /* Переходы */
  --transition:       0.18s ease;
  --transition-slow:  0.35s ease;

  /* Z-индексы */
  --z-dropdown:       100;
  --z-modal:          200;
  --z-toast:          300;
  --z-sidebar:        50;
  --z-header:         60;
}

/* ---------- CSS переменные: тёмная тема ---------- */
[data-theme="dark"] {
  --bg:               #0F0F14;
  --bg-card:          #1A1A24;
  --bg-sidebar:       #141419;
  --bg-input:         #1A1A24;
  --bg-hover:         #22222E;
  --bg-active:        #2D1F5E;
  --bg-overlay:       rgba(0,0,0,0.65);

  --border:           #2A2A38;
  --border-focus:     #A78BFA;

  --text:             #F1F0F5;
  --text-secondary:   #9CA3AF;
  --text-muted:       #6B7280;
  --text-accent:      #A78BFA;
  --text-error:       #F87171;
  --text-success:     #34D399;
  --text-warning:     #FCD34D;

  --accent:           #8B5CF6;
  --accent-hover:     #7C3AED;
  --accent-light:     #2D1F5E;
  --accent-text:      #DDD6FE;
  --accent-2:         #38BDF8;

  --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
  --shadow:           0 4px 12px rgba(0,0,0,0.4);
  --shadow-md:        0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:        0 16px 48px rgba(0,0,0,0.6);
  --shadow-accent:    0 4px 16px rgba(139,92,246,0.3);
}

/* ============================================================
   СБРОС И БАЗОВЫЕ СТИЛИ
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Golos Text', 'Nunito', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--transition-slow), color var(--transition-slow);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover { opacity: 0.8; }

img { max-width: 100%; display: block; }

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; }

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
}

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

.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Эффект ряби при нажатии */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn:active::after { opacity: 1; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

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

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

.btn-danger {
  background: #EF4444;
  color: #fff;
  border-color: #EF4444;
}
.btn-danger:hover:not(:disabled) {
  background: #DC2626;
  box-shadow: 0 4px 16px rgba(239,68,68,0.3);
  transform: translateY(-1px);
}

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-icon { padding: 10px; width: 40px; height: 40px; }
.btn-icon.btn-sm { padding: 6px; width: 32px; height: 32px; }

/* ============================================================
   ПОЛЯ ВВОДА
   ============================================================ */

.input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

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

.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.input:invalid, .input.error {
  border-color: var(--border-error);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-error {
  font-size: 12px;
  color: var(--text-error);
  display: none;
}

.input-group.has-error .input { border-color: var(--border-error); }
.input-group.has-error .input-error { display: block; }

/* ============================================================
   КАРТОЧКИ
   ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   АВАТАРЫ
   ============================================================ */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }

/* ============================================================
   БЕЙДЖИ И МЕТКИ
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge-accent  { background: var(--accent-light); color: var(--accent-text); }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-gray    { background: var(--bg-hover); color: var(--text-secondary); }

[data-theme="dark"] .badge-success { background: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .badge-warning { background: #451A03; color: #FCD34D; }
[data-theme="dark"] .badge-danger  { background: #450A0A; color: #FCA5A5; }

/* Приоритеты */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.priority-low      .priority-dot, .priority-dot.low      { background: var(--priority-low); }
.priority-normal   .priority-dot, .priority-dot.normal   { background: var(--priority-normal); }
.priority-high     .priority-dot, .priority-dot.high     { background: var(--priority-high); }
.priority-critical .priority-dot, .priority-dot.critical { background: var(--priority-critical); }

/* ============================================================
   ТОСТЫ И УВЕДОМЛЕНИЯ
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: all;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 400px;
  font-size: 14px;
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}

.toast.closing {
  animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  transition: width linear;
  width: 100%;
}

.toast-success .toast-progress { background: #10B981; }
.toast-error   .toast-progress { background: #EF4444; }
.toast-warning .toast-progress { background: #F59E0B; }

.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-body { flex: 1; }
.toast-title { font-weight: 600; color: var(--text); }
.toast-text  { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }

/* ============================================================
   МОДАЛЬНОЕ ОКНО
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  animation: fadeIn 0.2s ease forwards;
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

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

/* ============================================================
   СКЕЛЕТОН-ЗАГРУЗКА
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--bg-hover) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ — анимация через View Transition API
   ============================================================ */

@keyframes themeReveal {
  from { clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%)); }
  to   { clip-path: circle(150% at var(--theme-x, 50%) var(--theme-y, 50%)); }
}

::view-transition-new(root) {
  animation: themeReveal 0.5s ease;
}
::view-transition-old(root) {
  animation: none;
}

/* ============================================================
   АДАПТИВ — мобильные устройства
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --header-h:  56px;
  }

  #toast-container {
    bottom: calc(var(--bottombar-h) + 16px);
    right: 16px;
    left: 16px;
  }

  .toast {
    min-width: unset;
    width: 100%;
  }

  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* Уменьшаем анимации для пользователей с вестибулярными нарушениями */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}