/* ============================================================================
   PM Table — единая дизайн-система (app.css)
   ----------------------------------------------------------------------------
   Слои (ITCSS-подобно):
     1. TOKENS   — семантические переменные (цвет/радиус/отступ/тень/шрифт)
                   + тёмная тема [data-theme="dark"]
     2. BRIDGE   — алиасы к ЛЕГАСИ-именам (--google-*, --blue, --g-*): существующие
                   инлайн-стили страниц продолжают работать и подхватывают новый
                   акцент + тёмную тему БЕЗ переписывания. Душим легаси постепенно.
     3. BASE     — минимальная нормализация (аккуратно, чтобы не ломать плотный UI)

   Подключается ОДНОЙ строкой в <head> каждой страницы ПОСЛЕ шрифтов и ДО
   локального <style> страницы (чтобы локальные правила при необходимости
   перебивали — strangler pattern, миграция поэтапная).

   Версионируется автоматически (WhiteNoise ManifestStaticFilesStorage).
   ========================================================================== */

/* ============================================================================
   1. TOKENS — светлая тема (значения по умолчанию)
   ========================================================================== */
:root {
  /* --- Акцент (Linear-style indigo). Один токен — меняет всю акцентную гамму. --- */
  --c-accent:          #5b5ff5;   /* основной акцент (кнопки/ссылки/фокус) */
  --c-accent-hover:    #4b4fe0;   /* ховер акцента */
  --c-accent-weak:     #ececfe;   /* слабая заливка акцента (активный пункт, hover-подсветка) */
  --c-accent-border:   #d2d3fb;   /* рамка на акцентной заливке */
  --c-on-accent:       #ffffff;   /* текст на акцентном фоне */

  /* --- Нейтральная шкала (фон→поверхности→бордеры→текст) --- */
  --c-bg:              #f7f8fa;   /* фон приложения */
  --c-surface:         #ffffff;   /* карточки, модалки, панели */
  --c-surface-2:       #f1f3f5;   /* вторичная поверхность (hover строки, лесенка) */
  --c-surface-3:       #e8eaed;   /* третичная (вложенные контейнеры) */
  --c-border:          #e3e5e8;   /* бордеры/разделители (мягче google #dadce0) */
  --c-border-strong:   #d0d3d7;   /* акцентированный бордер (hover инпута) */
  --c-text:            #1f2329;   /* основной текст (почти чёрный, мягче #202124) */
  --c-text-2:          #6b7280;   /* вторичный текст/подписи */
  --c-text-3:          #9aa0a6;   /* третичный (плейсхолдеры, мета) */

  /* --- Семантические статусные цвета --- */
  --c-green:           #1e8e3e;
  --c-green-weak:      #e6f4ea;
  --c-red:             #d93025;
  --c-red-weak:        #fce8e6;
  --c-amber:           #f9ab00;
  --c-amber-weak:      #fef7e0;
  --c-purple:          #9334e6;
  --c-purple-weak:     #f3e8fd;

  /* --- Радиусы (единая шкала вместо 4/6/8 вперемешку) --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* карточки/кнопки/инпуты — базовый */
  --radius-lg:   12px;   /* модалки */
  --radius-pill: 999px;  /* чипы/бейджи-пилюли */

  /* --- Отступы (4px-сетка) --- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;

  /* --- Тени (3 уровня elevation, мягкие) --- */
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 2px 8px rgba(16,24,40,.10);
  --shadow-3: 0 12px 40px rgba(16,24,40,.18);

  /* --- Типографика --- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* схема для нативных контролов (скроллбары/автозаполнение) */
  color-scheme: light;
}

/* ============================================================================
   1b. TOKENS — тёмная тема. Переопределяем ТОЛЬКО значения токенов; всё, что
       ссылается на токены (через мост-алиасы тоже), темнеет автоматически.
   ========================================================================== */
:root[data-theme="dark"] {
  --c-accent:          #7c7ff8;   /* чуть светлее для контраста на тёмном */
  --c-accent-hover:    #9093fa;
  --c-accent-weak:     #26273a;
  --c-accent-border:   #3a3c5c;
  --c-on-accent:       #ffffff;

  --c-bg:              #0f1115;
  --c-surface:         #171a21;
  --c-surface-2:       #1e222b;
  --c-surface-3:       #262b35;
  --c-border:          #2a2f3a;
  --c-border-strong:   #3a4150;
  --c-text:            #e6e8eb;
  --c-text-2:          #9aa1ad;
  --c-text-3:          #6b7280;

  --c-green-weak:      #10331d;
  --c-red-weak:        #3a1512;
  --c-amber-weak:      #3a2e05;
  --c-purple-weak:     #2a153a;

  --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50);
  --shadow-2: 0 2px 8px rgba(0,0,0,.55);
  --shadow-3: 0 12px 40px rgba(0,0,0,.65);

  color-scheme: dark;
}

/* ============================================================================
   2. BRIDGE — алиасы к легаси-именам переменных.
   ----------------------------------------------------------------------------
   Существующие страницы используют --google-*, --blue/--text/--t2/--border/--bg,
   --g-* для ОДНИХ и тех же цветов. Здесь мы приравниваем их к семантическим
   токенам → старые инлайн-стили подхватывают новый акцент и тёмную тему без
   переписывания.

   ВАЖНО: это объявляется в :root из app.css. Если на КОНКРЕТНОЙ странице есть
   свой локальный :root с теми же именами (напр. goals.html с другими значениями),
   он грузится в <head> ПОСЛЕ app.css и перебьёт алиасы — такая страница не
   сломается, но и не подхватит новый акцент, пока её не мигрируем точечно.
   Это осознанный безопасный strangler-подход.
   ========================================================================== */
:root {
  /* Семейство A — --google-* (десктоп-приложение) */
  --google-blue:            var(--c-accent);
  --google-blue-hover:      var(--c-accent-hover);
  --google-blue-weak:       var(--c-accent-weak);
  --google-gray-bg:         var(--c-bg);
  --google-text:            var(--c-text);
  --google-text-secondary:  var(--c-text-2);
  --google-border:          var(--c-border);
  --google-green:           var(--c-green);
  --google-red:             var(--c-red);
  --google-shadow:          var(--shadow-1);

  /* Семейство B — короткие (аналитика + registration/login) */
  --blue:    var(--c-accent);
  --blue-h:  var(--c-accent-hover);
  --bg:      var(--c-bg);
  --text:    var(--c-text);
  --t2:      var(--c-text-2);
  --border:  var(--c-border);
  --green:   var(--c-green);
  --red:     var(--c-red);
  --shadow:  var(--shadow-1);

  /* Семейство C — --g-* (диаграммы/roadmap/mindmap/audit) */
  --g-blue:   var(--c-accent);
  --g-text:   var(--c-text);
  --g-t2:     var(--c-text-2);
  --g-border: var(--c-border);
  --g-bg:     var(--c-bg);
}

/* ============================================================================
   3. BASE — осторожная нормализация. НЕ меняем плотность/размеры существующего
      UI (он завязан на инлайн-стили). Только мягкие глобальные улучшения,
      безопасные для текущих страниц.
   ========================================================================== */

/* Плавная смена темы (фон/цвет/бордеры) — только на общих контейнерах, без
   глобального transition:all (дорого и ломает анимации). */
:root[data-theme="dark"] body {
  background: var(--c-bg);
  color: var(--c-text);
}

/* Нативные form-контролы — единый акцент из токена (иначе браузер красит своим
   системным синим: чекбоксы, радио, выпадающий список select, прогресс и т.п.).
   Одно правило на весь UI. */
input, select, textarea, button, progress {
  accent-color: var(--c-accent);
}

/* Единый цвет выделения текста — в акцент (мелочь, но добавляет «фирменности»). */
::selection { background: var(--c-accent-weak); color: var(--c-text); }

/* Тонкие кастомные скроллбары (consistent в обеих темах) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   4. COMPONENTS — переиспользуемые классы дизайн-системы.
   ----------------------------------------------------------------------------
   Префикс pm- — чтобы НЕ коллизировать с существующими inline-классами страниц
   (.btn-primary, .input, .card и т.п. уже встречаются в разных <style>). Эти
   классы АДДИТИВНЫ: ни на что не влияют, пока явно не навешены. Применяем точечно,
   постепенно заменяя inline-копии кнопок/инпутов. Все цвета — из токенов (готовы к
   тёмной теме).
   ========================================================================== */

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1;
  padding: 8px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s; outline: none;
  user-select: none; text-decoration: none;
}
.pm-btn:focus-visible { box-shadow: 0 0 0 3px var(--c-accent-weak); }
.pm-btn:disabled { opacity: .55; cursor: default; }

/* Primary — контурный акцент (основной стиль настроек: белый фон + акцентная рамка/текст) */
.pm-btn-primary { background: var(--c-surface); color: var(--c-accent); border-color: var(--c-accent); }
.pm-btn-primary:hover { background: var(--c-accent-weak); }

/* Solid — залитый акцент (для редких CTA, где нужен акцент заливкой) */
.pm-btn-solid { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.pm-btn-solid:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

/* Ghost — вторичная (нейтральная рамка, прозрачный фон) */
.pm-btn-ghost { background: var(--c-surface); color: var(--c-text-2); border-color: var(--c-border); }
.pm-btn-ghost:hover { background: var(--c-surface-2); }

/* Danger — удаление (красный контур) */
.pm-btn-danger { background: var(--c-surface); color: var(--c-red); border-color: var(--c-border); }
.pm-btn-danger:hover { background: var(--c-red-weak); border-color: var(--c-red); }

/* Иконочная кнопка (квадрат 32px, прозрачная, hover-подсветка) */
.pm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: none; background: none;
  border-radius: var(--radius-sm); color: var(--c-text-2); cursor: pointer;
  transition: background .12s, color .12s;
}
.pm-icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }

/* ── Поля ввода / селекты ───────────────────────────────────────────────── */
.pm-input, .pm-select {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 13px;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  padding: 8px 11px; outline: none; transition: border-color .12s, box-shadow .12s;
}
.pm-input:hover, .pm-select:hover { border-color: var(--c-border-strong); }
.pm-input:focus, .pm-select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-weak); }
.pm-input::placeholder { color: var(--c-text-3); }

/* Селект — кастомный шеврон (как уже принято в проекте), нативная стрелка скрыта */
.pm-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 32px; cursor: pointer;
  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='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}

/* ── Карточка / поверхность ─────────────────────────────────────────────── */
.pm-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}

/* ── Бейдж / чип ────────────────────────────────────────────────────────── */
.pm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--c-surface-2); color: var(--c-text-2);
}
.pm-badge-accent { background: var(--c-accent-weak); color: var(--c-accent); }

/* ── Сегмент-переключатель 2026 (pill slider, стиль Linear/Plane) ──
   Контейнер — мягкая подложка (surface-2), БЕЗ жёстких границ-разделителей.
   Активный сегмент — «пилюля» surface (белая) с лёгкой тенью, акцентный текст.
   Единый для матрицы/канбана/аналитики/отсутствий. Сегменты — <a>/<button>. */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; height: 30px; box-sizing: border-box;
  background: var(--c-surface-2); border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.seg > a, .seg > button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 14px; border: none; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--c-text-2); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-pill); white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg > a:hover, .seg > button:hover { color: var(--c-text); }
.seg > a.active, .seg > button.active {
  background: var(--c-surface); color: var(--c-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}