/* todo-ai — "гроссбух": холодная бумага, чернильный текст, тил вместо стандартного
   bootstrap-синего. Заголовки засечным шрифтом, таблица задач моноширинным —
   продолжение эстетики ASCII-таблиц из терминальной версии. */

:root {
    --paper:        #F5F6F4;
    --sheet:        #FFFFFF;
    --ink:          #1B2430;
    --ink-muted:    #5B6470;
    --line:         #DADFDC;
    --accent:       #0C6B68;
    --accent-ink:   #063F3D;

    --priority-critical:      #B3261E;
    --priority-critical-bg:   #FBEAE9;
    --priority-important:     #8A5A00;
    --priority-important-bg:  #FBF1DC;
    --priority-low:           #6B7280;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

.layout {
    display: flex;
    align-items: flex-start;
    max-width: 1120px;
    margin: 0 auto;
}

.sidebar {
    width: 200px;
    flex: 0 0 200px;
    padding: 32px 12px 32px 20px;
    position: sticky;
    top: 0;
}

.sidebar-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-muted);
    margin: 0 0 10px;
}

.sidebar-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-heading-row .sidebar-title {
    margin: 0 0 10px;
}

.sidebar-add-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 22.5px; /* было 15px — на 50% крупнее, по запросу пользователя */
    font-weight: 600;
    margin-bottom: 10px; /* выравнивает по низу с margin у .sidebar-title рядом */
    border: none;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
}

.sidebar-add-btn:hover {
    color: var(--accent);
}

.project-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.project-list li { margin-bottom: 2px; }

.project-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
}

.project-link:hover { background: var(--sheet); color: var(--ink); }

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

.project-badge {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    color: var(--ink-muted);
}

.badge-today { color: #1E9E4B; font-weight: 600; }
.badge-total { color: var(--ink); font-weight: 600; }

.project-link.active .badge-today,
.project-link.active .badge-total {
    color: #fff;
}

.project-link.active {
    background: var(--accent);
    color: #fff;
}

.sidebar-title-periods {
    margin-top: 18px;
}

.period-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.period-list li { margin-bottom: 2px; }

.period-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 14.5px;
    font-family: inherit;
    cursor: pointer;
}

.period-item:hover { background: var(--sheet); }

.period-item.active {
    background: var(--accent);
    color: #fff;
}

.ledger {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.ledger-header {
    margin-bottom: 28px;
}

.kicker {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--ink-muted);
}

.kicker-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.kicker-logout {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: underline;
    cursor: pointer;
}
.kicker-logout:hover {
    color: var(--accent);
}

h1 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    font-size: 32px;
    margin: 0;
    color: var(--ink);
}

.heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.task-date-type-row {
    display: flex;
    width: 100%;
}

.task-date-type-row .btn {
    flex: 1 1 0;
}

.task-date-type-row + .task-date-type-row {
    margin-top: 6px;
}

.command-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#command-input {
    width: 100%;
}

.command-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Не-Chrome: голосового ввода нет (Web Speech API есть только в Chrome/Chromium — см.
   agents_main.md, раздел "Голосовые команды"), поэтому обе кнопки-микрофона скрыты и форма
   возвращается к одной строке (поле ввода + "Отправить"), как было до появления микрофонов. */
.command-form.no-mic {
    flex-direction: row;
}

.command-form.no-mic #command-input {
    width: auto;
    flex: 1 1 auto;
}

.command-form.no-mic .command-form-actions {
    flex: 0 0 auto;
}

.command-form.no-mic #mic-fill-btn,
.command-form.no-mic #mic-send-btn {
    display: none;
}

#new-task-btn,
#command-submit {
    width: 150px;
    flex: 0 0 auto;
}

#command-input {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--sheet);
    color: var(--ink);
    box-shadow: none;
}

#command-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(12, 107, 104, 0.15);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--accent-ink) !important;
    border-color: var(--accent-ink) !important;
}

.reply-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 13.5px;
    color: var(--accent-ink);
    background: #E3EFEE;
    border: 1px solid var(--accent);
    border-radius: 4px;
}

.reply-banner span { font-weight: 600; }
.reply-banner .btn-close { margin-left: auto; }

.request-queue {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13.5px;
}

.queue-item {
    padding: 5px 8px;
    border-radius: 4px;
}

.queue-item-question {
    background: #FBF1DC;
}

.queue-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.queue-yes-btn {
    margin-left: auto;
}

.queue-yes-btn,
.queue-clarify-btn {
    padding: 1px 10px;
    font-size: 12.5px;
}

.queue-warn-btn {
    border: none;
    background: none;
    padding: 0 2px;
    color: var(--priority-important);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.queue-status {
    color: var(--ink-muted);
    flex: 0 0 auto;
}

.queue-text {
    color: var(--ink);
}

.queue-toggle {
    cursor: pointer;
}

.queue-warn-btn {
    cursor: pointer;
}

.queue-log {
    margin: 6px 0 2px 22px;
    padding: 8px 10px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 4px;
    white-space: pre-wrap;
    color: var(--ink);
}

.section {
    margin-bottom: 24px;
}

.section h2 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--ink);
}

.sheet {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

table {
    width: 100%;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    /* Колонки задаются через <colgroup> в JS (см. renderTasks() в app.js), чтобы ширина
       совпадала между разными таблицами-секциями на одной странице — с table-layout: auto
       браузер считает ширину каждой таблицы независимо по её собственному содержимому. */
    table-layout: fixed;
}

thead th {
    background: var(--paper);
    color: var(--ink-muted);
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}

tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

td.num {
    text-align: right;
    color: var(--ink-muted);
    width: 1%;
}

td.nowrap {
    white-space: nowrap;
}

/* Перетаскивание подзадач мышью за название (см. agents_main.md, "Перетаскивание подзадач"). */
td.subtask-title {
    cursor: grab;
}

/* Инлайн-редактирование Категория/Приоритет кликом по ячейке (см. agents_main.md). */
td.cell-category,
td.cell-priority {
    cursor: pointer;
}

td.cell-category:hover {
    background: var(--paper);
}

/* Не трогаем background у td.cell-priority:hover — та же специфичность, что у заливки
   важная/критичная (см. ниже), перекрыла бы её цветом paper вместо собственного оттенка. */
td.cell-priority:hover {
    filter: brightness(0.96);
}

.cell-editor {
    width: 100%;
    font: inherit;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--sheet);
    color: inherit;
}

tr.dragging {
    opacity: 0.4;
}

tr.drag-over-top td {
    box-shadow: inset 0 2px 0 0 var(--accent);
}

tr.drag-over-bottom td {
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Перетаскивание проектов в сайдбаре (см. agents_main.md, "Перетаскивание проектов") — те же
   визуальные маркеры, что и у подзадач выше, просто на <li> списка проектов вместо <tr>. */
.project-list li.dragging {
    opacity: 0.4;
}

.project-list li.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--accent);
}

.project-list li.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

td.actions {
    width: 1%;
    white-space: nowrap;
    /* Влево, не вправо — иначе строки с 3 кнопками (подзадачи, без "Добавить подзадачу") и с 4
       (задачи верхнего уровня) хугались бы к разным опорным точкам и колонки с кнопками "гуляли"
       между задачами и подзадачами. При выравнивании влево первые 3 кнопки всегда на одном месте,
       четвёртая просто добавляется правее, где у подзадач всё равно пусто. */
    text-align: left;
    /* Обнуляет "случайный" зазор между кнопками от пробела/переноса строки в HTML-шаблоне
       (public/app.js) — без этого расстояние между кнопками нельзя было бы задать точно, оно
       зависело от унаследованного размера шрифта. Явный зазор — margin-left на .btn-icon ниже. */
    font-size: 0;
}

.btn-icon {
    border: none;
    background: none;
    padding: 2px 6px;
    font-size: 15px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
}

.btn-icon + .btn-icon {
    margin-left: 4px; /* было ~7.4px (случайный зазор от пробела в разметке) — вдвое меньше */
}

.btn-icon:hover { background: var(--paper); }
.btn-complete { color: var(--accent); }
.btn-complete:hover { color: var(--accent-ink); }
.btn-cancel { color: var(--priority-critical); }
.btn-cancel:hover { color: #7A140F; }
.btn-edit { color: var(--ink-muted); }
.btn-edit:hover { color: var(--ink); }
.btn-add-subtask { color: var(--ink-muted); }
.btn-add-subtask:hover { color: var(--ink); }
.btn-add-subtask i { font-size: 10.5px; } /* на 30% меньше остальных иконок в строке (15px) */
.btn-edit i { font-size: 12px; } /* на 20% меньше остальных иконок в строке (15px) */

/* Просроченные задачи (секция "overdue" — и в "Обзоре", и над "Сегодня" в меню "Сроки") —
   текст строк красным, чтобы бросались в глаза. */
.section-overdue td { color: var(--priority-critical); }

/* Просроченная подзадача, показанная вложенной под ещё активным родителем в другой секции
   (см. agents_main.md, "Классификация подзадач по дате") — та же красная подсветка строки, но на
   уровне отдельной строки, а не всей секции. */
tr.row-overdue td { color: var(--priority-critical); }

td.priority.критичная { color: var(--priority-critical); background: var(--priority-critical-bg); font-weight: 600; }
td.priority.важная    { color: var(--priority-important); background: var(--priority-important-bg); font-weight: 600; }
td.priority.неважная  { color: var(--priority-low); }

/* В просроченных строках ячейка приоритета — тоже красным текстом, независимо от значения
   (переопределяет цвет важная/критичная/неважная выше; заливка фона приоритета сохраняется).
   Три класса против двух у правил выше — выигрывает по специфичности всегда, независимо от
   порядка объявления в файле. */
.section-overdue td.priority.критичная,
.section-overdue td.priority.важная,
.section-overdue td.priority.неважная,
tr.row-overdue td.priority.критичная,
tr.row-overdue td.priority.важная,
tr.row-overdue td.priority.неважная {
    color: var(--priority-critical);
}

.muted { color: var(--ink-muted); font-size: 14px; }

/* Кнопка-аккордион левого меню — скрыта на десктопе (видна только в @media ниже), чтобы на ПК
   всё выглядело ровно как раньше. */
.sidebar-toggle-btn {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.sidebar-toggle-btn i {
    color: var(--ink-muted);
    transition: transform 0.15s ease;
}

.sidebar.sidebar-open .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

@media (max-width: 720px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; flex: none; position: static; padding: 14px 16px 0; }

    /* Левое меню сворачивается в аккордион — по умолчанию скрыто, разворачивается кнопкой
       выше; на десктопе (вне этого media query) .sidebar-body всегда просто display:block
       (унаследованный дефолт), .sidebar-toggle-btn скрыта — там ничего не меняется. */
    .sidebar-toggle-btn { display: flex; }
    .sidebar-body { display: none; padding-top: 14px; }
    .sidebar.sidebar-open .sidebar-body { display: block; }

    /* Таблица задач → карточки (по запросу пользователя): строка 1 — название задачи на всю
       ширину, строка 2 — проект (если есть)/категория/приоритет/№/кнопки в один ряд. Работает
       БЕЗ изменений в HTML/JS — колонки различаются по позиции СПРАВА (nth-last-child), она
       одинакова что с колонкой "Проект" ("Обзор" по всем проектам), что без неё: кнопки/"Когда"
       всегда последние, № — предпоследний, задача — третья с конца, приоритет — четвёртый,
       категория — пятая, проект (если есть) — шестой (см. renderTasks() в app.js — порядок
       колонок в разметке не меняется, только позиция ОТ КОНЦА постоянна).
       table-layout: fixed (десктоп) больше не действует, т.к. table/tbody уходят из табличного
       layout'а (display: block) — колонки в <colgroup> для мобильного вида просто не участвуют. */
    table, tbody { display: block; width: 100%; }
    thead { display: none; }

    /* CSS Grid, не flex-wrap — с flex+order+margin-left:auto кнопки действий при переносе строк
       непредсказуемо "уезжали" за пределы видимой области (обнаружено на реальном телефоне).
       Grid жёстко закрепляет каждую колонку в своей ячейке независимо от того, сколько места
       заняли соседние (категория/приоритет/№) — переноса строк внутри строки 2 просто не
       бывает, кнопки/"Когда" всегда в последней колонке (justify-self: end). */
    tbody tr {
        display: grid;
        grid-template-columns: auto auto auto auto 1fr;
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        /* pan-y — браузер сразу знает, что вертикальный скролл его, горизонтальный жест (свайп
           влево = "Завершить", см. app.js) перехватывает наш JS через preventDefault. */
        touch-action: pan-y;
    }
    tbody tr:last-child { border-bottom: none; }
    tr > td { border-bottom: none; padding: 0; vertical-align: baseline; }

    /* Свайп влево пройден за порог — фон подсказывает, что отпускание завершит задачу (тот же
       светло-тиловый оттенок, что у .reply-banner — "положительное" действие в этой палитре). */
    tr.swipe-armed { background: #E3EFEE; }

    /* Подзадача — тот же принцип отступа, что и текстовый "↳" внутри названия, плюс граница
       слева для карточки целиком (текстовый отступ в названии остаётся как есть). */
    tr[data-parent-id] { padding-left: 22px; border-left: 2px solid var(--line); }

    /* Строка 1 — название, на всю ширину грида (все 5 колонок). */
    tr > td:nth-last-child(3) {
        grid-row: 1;
        grid-column: 1 / -1;
        font-weight: 600;
        white-space: normal;
    }

    /* Строка 2 — проект → категория → приоритет → № в своих колонках, кнопки/"Когда" — в
       последней (широкой, 1fr) колонке, прижаты к правому краю. */
    tr > td:nth-last-child(6) { grid-row: 2; grid-column: 1; } /* проект — только в "Обзоре" по всем проектам */
    tr > td:nth-last-child(5) { grid-row: 2; grid-column: 2; } /* категория */
    tr > td:nth-last-child(4) { grid-row: 2; grid-column: 3; } /* приоритет */
    /* width: 1% (td.num/td.actions, десктопные правила выше по файлу) тут не нужен и вреден —
       в grid-режиме эта почти нулевая ширина сжимала ячейку до пары пикселей, а её содержимое
       (номер, кнопки) вылезало за пределы экрана вместо переноса в свою колонку (обнаружено на
       реальном телефоне) — явно сбрасываем на auto. */
    tr > td:nth-last-child(2) { grid-row: 2; grid-column: 4; width: auto; color: var(--ink-muted); font-size: 12px; } /* № */
    tr > td:nth-last-child(2)::before { content: '№'; }
    tr > td:nth-last-child(1) { grid-row: 2; grid-column: 5; width: auto; justify-self: end; } /* кнопки действий / "Когда" */

    /* Категория/приоритет — компактные "чипы", а не голый текст в общем ряду. Пустой приоритет
       (значение "обычная" не выводится — см. taskToJson()) — чип не рисуем. */
    tr > td:nth-last-child(5) {
        padding: 2px 8px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 4px;
        font-size: 12px;
    }
    td.priority { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
    tr > td:nth-last-child(4):empty { display: none; }
}

/* Плавающая кнопка "Новая задача" (FAB) — добавка поверх #new-task-btn в шапке, не замена (по
   запросу пользователя, "с возможностью отката" — чтобы вернуть как было, достаточно удалить
   этот блок целиком + кнопку в index.html + один обработчик клика в app.js, остальной код не
   трогается). Скрыта на десктопе (display:none вне @media ниже). */
.fab-new-task {
    display: none;
}

@media (max-width: 720px) {
    .fab-new-task {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: var(--accent);
        color: #fff;
        font-size: 26px;
        line-height: 1;
        box-shadow: 0 2px 10px rgba(6, 63, 61, 0.35);
        cursor: pointer;
        z-index: 1000;
    }
    .fab-new-task:hover { background: var(--accent-ink); }
    .fab-new-task:disabled { background: var(--ink-muted); box-shadow: none; cursor: not-allowed; }
}

@media (max-width: 560px) {
    table { font-size: 12.5px; }
}

/* Flatpickr — подгонка под акцент сайта вместо дефолтного синего */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-day.today:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

#mic-fill-btn, #mic-send-btn {
    flex: 0 0 auto;
}

.mic-recording {
    background: var(--priority-critical) !important;
    border-color: var(--priority-critical) !important;
    color: #fff !important;
    animation: mic-pulse 1s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}