/* ── Фирменный шрифт ────────────────────────────────────────────────────── */

/* Lato — фирменный шрифт Лигамайнд. Лежит у нас же, а не тянется из внешнего CDN:
   доска работает во внутреннем контуре, и один запрос наружу за шрифтом означал бы
   зависимость от чужой доступности ради начертания. Четыре веса покрывают всё:
   400 текст, 500 акценты, 600 заголовки, 700 кнопки. */
@font-face {
    font-family: "Lato";
    src: url("/brand/fonts/lato-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/brand/fonts/lato-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/brand/fonts/lato-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/brand/fonts/lato-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/*
 * Рабочая тема доски: то, что видно после входа.
 *
 * Отделена от brand.css (страница входа) намеренно: у двери задача произвести
 * впечатление, у рабочего экрана — не мешать работать восемь часов подряд.
 *
 * Главная правка против прежней версии: акцентом интерфейса был фирменный красный, и
 * им красились ссылки. Красный в интерфейсе читается как «ошибка» — глаз спотыкается о
 * каждую ссылку. Поэтому акцент теперь мятный (он тоже фирменный — токен лендинга
 * ligameind.ru), а красный оставлен там, где он и должен быть: тревога и срочное.
 */

:root {
    /* Слои: фон → панель → карточка. Три ступени, каждая заметно светлее предыдущей —
       иначе карточки сливаются с колонкой, а колонка с фоном. */
    --liga-bg: #0c1116;
    --liga-panel: #131a22;
    --liga-card: #1a222c;
    --liga-card-hover: #202b37;
    --liga-line: #24303e;

    --liga-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --liga-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --liga-mint: #4fd1a5;
    --liga-mint-soft: rgba(79, 209, 165, 0.14);
    --liga-amber: #e0a33a;
    --liga-red: #ef5f52;

    /* Переменные самой Vikunja: перекрываем их, чтобы не гоняться за каждым классом. */
    --primary: #4fd1a5;
    --primary-dark: #3bb98e;
    --primary-light: rgba(79, 209, 165, 0.16);
    --link: #4fd1a5;
    --link-hover: #7be0c0;
    --site-background: var(--liga-bg);
    --body-background-color: var(--liga-bg);
    --scheme-main: var(--liga-panel);
    --grey-50: var(--liga-bg);
    --grey-100: var(--liga-panel);
    --grey-200: var(--liga-line);
    --border: var(--liga-line);
    --danger: var(--liga-red);
    --warning: var(--liga-amber);
    --success: #4fd1a5;
}

body {
    font-family: var(--liga-font);
    /* Плоская заливка на весь экран выглядит мёртво. Едва заметное тёплое свечение снизу
       и холодное сверху дают глубину, оставаясь незаметными: их видно только если
       специально искать, а работать они не мешают. */
    background:
        radial-gradient(120% 80% at 85% -10%, rgba(79, 209, 165, 0.05) 0%, transparent 55%),
        radial-gradient(100% 70% at 10% 110%, rgba(224, 163, 58, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #101720 0%, var(--liga-bg) 45%) fixed;
    background-color: var(--liga-bg);
}

.app-content,
.content {
    background: transparent;
}

/* ── Типографическая шкала ──────────────────────────────────────────────── */

/* Четыре размера на весь интерфейс: заголовок экрана, заголовок блока, текст, служебное.
   Больше ступеней — больше поводов промахнуться, меньше — не хватает иерархии. */
body,
.tasks .single-task .tasktext,
.table-view td {
    font-size: 14px;
    line-height: 1.45;
}

h1, .title.is-1 { font-size: 20px !important; font-weight: 600; letter-spacing: -0.015em; }
h2, .title.is-2 { font-size: 17px !important; font-weight: 600; letter-spacing: -0.01em; }
h3, .title.is-3, .card-header-title { font-size: 15px !important; font-weight: 600; }

/* Служебное: номера, даты, подписи — мельче и приглушённее основного текста. */
.task-id,
.created-at,
.subtitle,
.help {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Номера и даты — моноширинными: в столбце из четырёхсот строк цифры должны стоять
   ровно, иначе взгляд цепляется за каждую. */
.task-id,
.table-view td:first-child {
    font-family: var(--liga-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Шапка и боковое меню ───────────────────────────────────────────────── */

.navbar,
.menu-container {
    background: var(--liga-panel) !important;
    border-color: var(--liga-line) !important;
}

.menu-container .menu-list a {
    border-radius: 8px;
    margin: 1px 8px;
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.72);
    transition: background 0.12s ease, color 0.12s ease;
}

.menu-container .menu-list a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Активный проект — мятной заливкой, а не просто цветом текста: в списке из пяти
   пунктов подсветка текста теряется. */
.menu-container .menu-list a.router-link-exact-active,
.menu-container .menu-list li.is-active > a {
    background: var(--liga-mint-soft) !important;
    color: var(--liga-mint) !important;
    font-weight: 550;
}

/* ── Колонки канбана ────────────────────────────────────────────────────── */

.bucket {
    background: var(--liga-panel) !important;
    border: 1px solid var(--liga-line);
    border-radius: 12px;
    padding-bottom: 4px;
}

.bucket-header {
    padding: 12px 14px 10px !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bucket .title {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Карточки ───────────────────────────────────────────────────────────── */

.task.kanban-card {
    background: var(--liga-card) !important;
    border: 1px solid var(--liga-line) !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    margin-bottom: 9px !important;
    box-shadow: none !important;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.task.kanban-card:hover {
    background: var(--liga-card-hover) !important;
    border-color: #34445a !important;
    transform: translateY(-1px);
}

.task.kanban-card .task-id {
    color: rgba(255, 255, 255, 0.34) !important;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* Приоритет отмечаем полосой слева, а не только текстом: в колонке из тридцати карточек
   важное должно находиться боковым зрением. Цвет по смыслу: красный — то, что горит,
   янтарь — важное. Средний приоритет полосы не получает, иначе она перестаёт что-либо
   значить: полоса есть у всех — значит ни у кого. */
.task.kanban-card:has(.high-priority) {
    border-left: 3px solid var(--liga-red) !important;
}

.task.kanban-card:has(.not-so-high) {
    border-left: 3px solid var(--liga-amber) !important;
}

.priority-label {
    font-size: 11px !important;
}

/* ── Метки ──────────────────────────────────────────────────────────────── */

.tag,
.label {
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 500;
    padding: 2px 8px !important;
    letter-spacing: 0.01em;
}

/* ── Кнопки и поля ──────────────────────────────────────────────────────── */

.button.is-primary,
.base-button.is-primary {
    background: var(--liga-mint) !important;
    color: #08130f !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    box-shadow: none !important;
}

.button.is-primary:hover,
.base-button.is-primary:hover {
    background: var(--liga-mint-hover, #63e0b6) !important;
    transform: none;
}

.button:not(.is-primary) {
    border-radius: 8px !important;
    border-color: var(--liga-line) !important;
}

.input,
.textarea,
input.input {
    background: var(--liga-card) !important;
    border-color: var(--liga-line) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.input:focus,
.textarea:focus {
    border-color: var(--liga-mint) !important;
    box-shadow: 0 0 0 3px var(--liga-mint-soft) !important;
}

/* ── Ссылки ─────────────────────────────────────────────────────────────── */

a,
.button-link {
    color: var(--liga-mint);
}

a:hover {
    color: #7be0c0;
}

/* Кроме тех, что и должны тревожить. */
a.is-danger,
.has-text-danger,
.is-danger {
    color: var(--liga-red) !important;
}

/* ── Прочее ─────────────────────────────────────────────────────────────── */

.card,
.task-detail-view,
.modal-content {
    background: var(--liga-panel) !important;
    border: 1px solid var(--liga-line) !important;
    border-radius: 12px !important;
}

/* Переключатель представлений: активная вкладка красится жёстким синим мимо всех
   переменных — перекрываем прямо по классу. */
.switch-view-container {
    background: var(--liga-panel);
    border: 1px solid var(--liga-line);
    border-radius: 10px;
    padding: 3px;
    display: inline-flex;
    gap: 2px;
}

.switch-view-button {
    border-radius: 7px !important;
    font-size: 13px !important;
    padding: 5px 12px !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.switch-view-button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.switch-view-button.is-active {
    background: var(--liga-mint) !important;
    color: #08130f !important;
    font-weight: 600;
}

/* Кнопка добавления колонки — служебная, ей незачем спорить за внимание с карточками. */
.bucket.new-bucket,
.bucket .button.is-ghost {
    opacity: 0.55;
}

.bucket.new-bucket:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kanban .task,
    .menu-container .menu-list a {
        transition: none;
    }
    .task.kanban-card:hover {
        transform: none;
    }
}

/* ── Заголовки колонок ──────────────────────────────────────────────────── */

/* Заголовок колонки — редактируемое поле, и Vikunja рисует его как поле ввода: рамка
   висит постоянно, будто ждёт ввода. Показываем её только при наведении. */
.bucket-header .title.input {
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 4px !important;
    font-weight: 600;
}

.bucket-header:hover .title.input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--liga-line) !important;
}

/* Пустая колонка не должна выглядеть сломанной: приглушаем призыв и убираем рамку. */
.bucket .button.is-ghost {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500;
}

.bucket .button.is-ghost:hover {
    color: var(--liga-mint) !important;
}

/* ── Метки ──────────────────────────────────────────────────────────────── */

/* Синяя «средняя» спорила с мятным акцентом — приглушаем до нейтрального, чтобы цвет
   в интерфейсе значил ровно одно: мятный — действие, красный — тревога, янтарь — внимание. */
.tag[style*="rgb(46, 110, 150)"],
.tag[style*="#2e6e96"] {
    background: #33445a !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Плотность и типографика ────────────────────────────────────────────── */

.task.kanban-card .task-text,
.task.kanban-card > span {
    font-size: 13.5px;
    line-height: 1.4;
}

.menu-container .menu-list a {
    font-size: 14px;
}

/* Заголовок проекта в шапке — крупнее, он единственный ориентир «где я». */
.navbar .title {
    font-size: 19px !important;
    font-weight: 620;
    letter-spacing: -0.015em;
}

/* ── Левое меню: только то, чем пользуются ──────────────────────────────── */

/* «Проекты» дублируют список проектов прямо под собой, «Метки» и «Команды» нужны раз в
   полгода (команда из двух человек), «Входящие» — служебный проект Vikunja, который у
   нас всегда пуст. Пункты не удалены, а скрыты: страницы по прямым ссылкам работают. */
.menu-container a[href="/projects"],
.menu-container a[href="/labels"],
.menu-container a[href="/teams"],
.menu-container a[href="/projects/1"] {
    display: none !important;
}

/* Ссылка на сайт чужого продукта в подвале меню. */
.menu-container a[href*="vikunja.io"] {
    display: none !important;
}

/* ── Таблица ────────────────────────────────────────────────────────────── */

.table-view table,
.card table {
    table-layout: auto;
    inline-size: 100%;
    font-size: 13.5px;
}

.table-view th,
.card table th {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6) !important;
    white-space: nowrap;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--liga-line) !important;
}

.table-view td,
.card table td {
    padding: 9px 12px !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle;
}

/* Название — главное в строке, ему и место: остальные столбцы ужимаются по содержимому. */
.table-view th:nth-child(3),
.table-view td:nth-child(3) {
    inline-size: 60%;
}

.table-view th:nth-child(1),
.table-view td:nth-child(1),
.table-view th:nth-child(2),
.table-view td:nth-child(2) {
    inline-size: 1%;
    white-space: nowrap;
}

.table-view tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* ── Список ─────────────────────────────────────────────────────────────── */

.tasks .task,
.task-list .task {
    padding: 9px 12px !important;
    border-radius: 8px;
    font-size: 14px;
}

.tasks .task:hover,
.task-list .task:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* ── Ширина списка ──────────────────────────────────────────────────────── */

/* Список задач упирался в 1024 px, пока таблица рядом занимала всю ширину окна — на
   широком мониторе это выглядело как случайно зауженная колонка. Ограничение снимаем
   только здесь: в настройках и текстовых страницах узкая колонка как раз правильная,
   длинные строки читать тяжело. */
.list-view.is-max-width-desktop,
.project-view .is-max-width-desktop {
    max-inline-size: none !important;
}

/* ── Строки списка ──────────────────────────────────────────────────────── */

/*
 * Как было: чекбокс, за ним приоритет («Срочный»), потом название, потом метки — всё в
 * одном потоке текста. Читать приходилось через препятствие: глаз ищет название, а
 * первым встречает служебный ярлык. Метки при этом висели там, где закончился текст, то
 * есть у каждой строки в своём месте.
 *
 * Как стало: название начинается всегда с одной позиции, служебное (приоритет, метки)
 * уезжает вправо и выравнивается по правому краю. Строка читается по вертикали, а не
 * по зигзагу.
 */

.tasks .single-task {
    display: grid !important;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: background 0.12s ease;
}

.tasks .single-task:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

.tasks .single-task:last-child {
    border-bottom: none !important;
}

/* Сам текст строки: название слева, служебное — вправо. */
.tasks .single-task .tasktext {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
}

/* Порядок внутри строки: название слева, ярлыки справа.
   Осторожно с селекторами: `span.is-inline-flex` внутри строки — это САМО НАЗВАНИЕ
   (приоритет вложен в него же), и назначение ему порядка отправляло всю строку вправо.
   Переставляем только метки — их обёртка `.label-wrapper`. */
.tasks .single-task .tasktext > .label-wrapper {
    order: 6;
    flex: 0 0 auto;
}

.tasks .single-task .tasktext > span:not(.is-inline-flex) {
    order: 7;
}

.tasks .single-task .tasktext .priority-label {
    margin: 0 !important;
    font-size: 11px !important;
}

/* Номер задачи внутри названия (BUG-428) — приглушаем, он ориентир, а не заголовок. */
.tasks .single-task .task-id {
    order: -1;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Звёздочка «в избранное» нужна редко — показываем при наведении, чтобы не рябило. */
.tasks .single-task > .base-button {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tasks .single-task:hover > .base-button,
.tasks .single-task > .base-button:focus-visible {
    opacity: 0.7;
}

/* Значок «есть описание» — служебная деталь, ей хватит четверти внимания. */
.tasks .single-task .icon {
    opacity: 0.35;
}

/* Выполненная строка не должна выглядеть так же, как живая. */
.tasks .single-task.done .tasktext,
.tasks .single-task .is-done ~ .tasktext {
    opacity: 0.55;
}

/* Контейнер списка — карточкой с рамкой, чтобы строки не висели в пустоте. */
.list-view .tasks {
    background: var(--liga-panel);
    border: 1px solid var(--liga-line);
    border-radius: 12px;
    overflow: hidden;
    padding: 0 !important;
}

/* Поле «Добавить задачу» — та же ширина и радиус, что у списка под ним. */
.list-view .add-task-textarea,
.list-view .task-add {
    margin-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .tasks .single-task,
    .tasks .single-task > .base-button {
        transition: none;
    }
}

/* Ярлыки прижимаются к правому краю строки: иначе они начинаются там, где кончился
   текст, то есть у каждой строки в своём месте — глазу не за что зацепиться.
   Прижимаем распоркой, а не отступом у ярлыка: у ярлыков стоит `margin: 0`, и бороться
   с ним пришлось бы специфичностью на каждом элементе отдельно. Распорка встаёт между
   названием (порядок 0) и служебным (порядок 5+) и растягивается на весь остаток. */
.tasks .single-task .tasktext::after {
    content: "";
    order: 4;
    flex: 1 1 auto;
}

/* Ограничение ширины висит на самой строке (`.is-max-width-desktop .tasks .task`,
   1024 px), а не только на контейнере — снятия внешнего ограничения было мало: строки
   продолжали жаться, оставляя справа пустую полосу. */
.is-max-width-desktop .tasks .task,
.tasks .single-task {
    max-inline-size: none !important;
    inline-size: 100%;
}

/* ── Строка добавления задачи ───────────────────────────────────────────── */

/* Кнопка «Добавить» была вдвое выше всего остального на экране: единственное действие
   на странице не обязано быть и самым громким элементом. Приводим её и поле к общему
   масштабу — высота как у строки списка, шрифт как у интерфейса. */
.add-task .input,
.add-task textarea,
.task-add .input,
.task-add textarea {
    min-block-size: 42px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
}

.add-task .button,
.task-add .button,
.add-task .base-button.is-primary,
.task-add .base-button.is-primary {
    block-size: 42px !important;
    min-block-size: 42px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    border-radius: 9px !important;
    white-space: nowrap;
}

/* Иконка внутри кнопки не должна перевешивать надпись. */
.add-task .button .icon,
.task-add .button .icon {
    font-size: 12px;
    margin-inline-end: 6px;
}

/* ── Левое меню ─────────────────────────────────────────────────────────── */

/* Первая правка скрывала только ссылки — сами пункты списка оставались и держали
   пустое место, из-за чего меню выглядело дырявым. Прячем элементы целиком. */
.menu-container li:has(> a[href="/projects"]),
.menu-container li:has(> a[href="/labels"]),
.menu-container li:has(> a[href="/teams"]),
.menu-container li:has(> a[href="/projects/1"]),
.menu-container li:has(> a[href*="vikunja.io"]) {
    display: none !important;
}

/* Заголовки разделов меню и сами пункты — единый ритм. */
.menu-container .menu-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding-inline: 18px;
    margin-block: 18px 6px;
}

/* ── Заголовки и шапка ──────────────────────────────────────────────────── */

/* Заголовок экрана — единственный крупный текст на странице. Остальное ниже него по
   весу, иначе взгляду не за что зацепиться при переходе между разделами. */
.navbar .title,
.project-title,
h1.title {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25;
}

/* Заголовок колонки канбана и заголовки блоков — одна ступень. */
.bucket .title,
.card-header-title,
.task-detail-view h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}

/* Кнопки и вкладки — не заголовки: им хватает служебного размера. */
.button,
.base-button,
.switch-view-button {
    font-family: var(--liga-font);
    font-size: 13.5px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Прописные в кнопках Vikunja разбивают ритм строки — оставляем обычный регистр там,
   где надпись длиннее одного слова. */
.button,
.base-button {
    text-transform: none !important;
}

/* Карточка задачи внутри — читаемая ширина текста описания. */
.task-detail-view .description,
.task-detail-view .content {
    font-size: 14.5px;
    line-height: 1.6;
    max-inline-size: 78ch;
}

.task-detail-view .description h1,
.task-detail-view .description h2,
.task-detail-view .description h3 {
    font-size: 16px !important;
    font-weight: 600;
    margin-block: 18px 8px;
}

/* Подписи полей в карточке — служебные, ими не читают. */
.task-detail-view .detail-title {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4) !important;
}