/* Задачи: страница, зависимости, боковая панель, списания, таблица задач. Файлы стилей подключаются в templates/base.html по порядку. */

/* ===== Задача ===== */
.task-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.details { display: grid; gap: 18px; margin: 0; }
.details dt { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.details dd { margin: 0; }
.description { color: var(--text-2); }
.comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment .body { flex: 1; }
.comment .who { font-weight: 600; }
.comment .when { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.comment-form { margin-top: 16px; }
.comment-form p { margin-bottom: 10px; }

/* Зависимости задач */
.message.warn { background: var(--warn-soft); color: var(--warn); }
.message.warn a { color: var(--warn); text-decoration: underline; }
.dep { display: flex; align-items: center; gap: 6px; color: var(--text); padding: 3px 0; line-height: 1.35; }
.dep:hover { color: var(--link); }
.dep .badge { padding: 0; background: none; }

/* ===== Боковая панель задачи (static/teamwork/panel.js) ===== */
.task-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 20, 40, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.task-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: 560px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(20, 20, 40, .14);
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
.task-panel-open .task-panel { transform: none; }
.task-panel-open .task-panel-overlay { opacity: 1; pointer-events: auto; }
.task-panel.loading .task-panel-content { opacity: .45; transition: opacity .15s .1s; }
.task-panel-content { flex: 1; overflow-y: auto; }
.panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.panel-head .crumbs { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.panel-body { padding: 20px 24px 32px; }
.panel-title { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; margin: 0 0 18px; }
.panel-section { padding: 18px 0; border-top: 1px solid var(--border); }
.panel-section .details { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.panel-subtitle { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Подсветка задачи, открытой в панели */
tr.panel-source td { background: var(--accent-soft); }
.task-card.panel-source { box-shadow: 0 0 0 2px var(--accent-ink); }
[data-panel-card] { cursor: pointer; }

/* ===== Списания в задаче ===== */
.expense-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.expense-list { margin-bottom: 4px; }
.expense { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.expense-list .expense:first-child { border-top: none; }
.expense-main { flex: 1; min-width: 0; }
.expense-what { font-weight: 550; }
.expense-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.expense form { margin: 0; }
.expense-add { margin-top: 12px; }
.expense-add summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
  list-style: none;
}
.expense-add summary::-webkit-details-marker { display: none; }
.expense-add[open] summary { margin-bottom: 14px; }
.expense-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.expense-form p { margin-bottom: 12px; }
input[type=number] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input[type=number]:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Ячейки таблицы задач пониже обычных: внутри — меню и даты (перенесено из inline-edit.css) */
.task-table td { padding-top: 8px; padding-bottom: 8px; }
.task-table .person { gap: 4px; }

/* ===== Таблица задач: колонки, разделы, перетаскивание ===== */
.task-table { table-layout: fixed; width: 100%; }
.task-table th, .task-table td { overflow: hidden; }
.task-table th { position: relative; white-space: nowrap; user-select: none; }
.task-table th[draggable="true"] { cursor: grab; }
.task-table th.dragging { opacity: .4; }
.task-table th.drop-before { box-shadow: inset 3px 0 0 var(--accent-ink); }
.task-table th.drop-after { box-shadow: inset -3px 0 0 var(--accent-ink); }
.task-table .col-filler { padding: 0; }
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
}
.col-resizer::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 2px; background: var(--border-strong); opacity: 0; }
.task-table th:hover .col-resizer::after, .task-table.resizing .col-resizer::after { opacity: 1; }
.task-table.resizing { cursor: col-resize; user-select: none; }
.task-table td.title-cell { position: relative; white-space: nowrap; text-overflow: ellipsis; }
/* Значок перетаскивания — над левым краем, чтобы круглые галочки задач стояли ровно под галочкой раздела */
.task-table td.title-cell .drag-handle { position: absolute; left: -6px; top: 50%; margin: 0; transform: translateY(-50%); }
.task-table td.title-cell a { display: inline; vertical-align: middle; }
.cell-text { white-space: nowrap; text-overflow: ellipsis; }
.comment-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--muted); font-size: 12.5px; vertical-align: middle; }
.comment-count .icon { width: 13px; height: 13px; }
.task-table:not(.columns-ready) { visibility: hidden; }

.drag-handle {
  display: inline-flex;
  width: 18px;
  margin: 0 4px 0 -10px;
  color: var(--border-strong);
  cursor: grab;
  vertical-align: middle;
  opacity: 0;
}
.drag-handle .icon { width: 16px; height: 16px; }
tr.task-row:hover .drag-handle { opacity: 1; }
.drag-handle:hover { color: var(--text-2); }
tr.task-row.dragging td { background: var(--accent-soft); opacity: .6; }
tr.saving-row { opacity: .6; }
.sorting tr.task-row:hover td { background: none; }

.section-row td { padding: 14px 12px 6px; background: var(--surface); border-bottom: 1px solid var(--border); }
tbody.task-section:first-of-type .section-row td { padding-top: 8px; }
.section-head { display: flex; align-items: center; gap: 6px; }
.section-toggle { width: 26px; height: 26px; }
.section-toggle .icon { transform: rotate(90deg); transition: transform .15s; }
tbody.collapsed .section-toggle .icon { transform: none; }
tbody.collapsed tr.task-row, tbody.collapsed tr.add-row { display: none; }
input.section-name, .section-name.static {
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  width: auto;
  min-width: 60px;
  field-sizing: content;
}
.section-name.static { display: inline-flex; align-items: center; color: var(--text-2); }
input.section-name:hover { border-color: var(--border-strong); }
input.section-name:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.section-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--grey-soft); color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center; }
/* Выполненный раздел: приглушён, название зачёркнуто */
tbody.section-done input.section-name { color: var(--muted); text-decoration: line-through; }
.section-delete { margin: 0 0 0 auto; opacity: 0; }
.section-row:hover .section-delete { opacity: 1; }
tr.add-row td { padding: 2px 12px 10px; border-bottom: 1px solid var(--border); }
tr.add-row .add-link { display: inline-flex; padding: 4px 6px; }
tbody.task-section.drop-target .section-row td { background: var(--accent-soft); }
tbody.task-section.empty tr.add-row td { padding-top: 10px; }
.sorting tbody.task-section.empty tr.add-row td { height: 46px; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--grey-soft) 6px 12px); }


/* ===== Плановые часы и «план / факт» ===== */
.hours-input { width: 110px; }
.plan-fact.over { color: var(--danger); font-weight: 600; }
.link-version { display: flex; gap: 8px; margin-top: 12px; } .link-version select { flex: 1; min-width: 0; }

/* ===== Список задач: строки плотнее ===== */
.task-table td { padding-top: 3px; padding-bottom: 3px; }
.task-table .picker-button, .task-table select.inline-select, .task-table input.inline-input { height: 28px; }
.task-table .picker-button.status-pill { height: 24px; }
.list-filter-note { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-2); font-size: 13.5px; }

/* ===== Выполненная задача =====
   Строка того же размера, что и остальные: название зачёркнуто, значения приглушены (tables.css, inline-edit.css). */
.task-table tr.done .picker-button { color: var(--muted); }

/* ===== Быстрое создание задачи (список, доска, Гант) ===== */
input.quick-add-input {
  width: 100%;
  max-width: 520px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--focus);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--surface);
  font: inherit;
}
.column input.quick-add-input { max-width: none; margin-top: 4px; }

/* ===== Выбор колонок списка задач (шестерёнка в заголовке «Задача», table-columns.js) ===== */
.task-table th[data-col="title"] { padding-right: 40px; }
.columns-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; color: var(--muted); }
.columns-button .icon { width: 15px; height: 15px; }
.columns-button:hover, .columns-button.open { color: var(--text); background: var(--grey-soft); }
.picker-popover.columns-popover { display: flex; flex-direction: column; gap: 2px; min-width: 230px; }
.columns-popover[hidden] { display: none; }
.columns-popover .label-caps { padding: 4px 8px 6px; }
.columns-popover label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; }
.columns-popover label:hover { background: var(--grey-soft); }
.task-table [data-col][hidden] { display: none; }
.task-table td[data-col="planned"] input.hours-input { width: 100%; }

/* ===== Вложения в комментариях ===== */
.comment-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.comment-images img { display: block; max-width: 220px; max-height: 160px; width: auto; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; }
.comment-images a:hover img { border-color: var(--border-strong); }
.comment-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comment-doc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); }
.comment-doc .icon { width: 14px; height: 14px; color: var(--muted); }
.comment-doc:hover { border-color: var(--border-strong); color: var(--link); }
.comment-form.drop-target .comment-box { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.comment-previews, .comment-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.comment-previews:not(:empty), .comment-chips:not(:empty) { margin-top: 8px; }
.comment-preview { position: relative; }
.comment-preview img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.comment-preview .chip-remove { position: absolute; top: -6px; right: -6px; }
.comment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; background: var(--accent-soft); border-radius: 999px; font-size: 13px; }
.chip-remove {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: none;
  background: var(--surface); color: var(--text-2); font-size: 14px; line-height: 1; box-shadow: var(--shadow); cursor: pointer;
}
.chip-remove:hover { color: var(--danger); }
/* Поле комментария — «коробка»: текст без своей рамки, вложения, внизу значки и самолётик «Отправить» */
.comment-box { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 6px 6px; transition: border-color .15s, box-shadow .15s; }
.comment-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.comment-box textarea, .comment-box textarea:focus { display: block; width: 100%; border: 0; box-shadow: none; background: transparent; padding: 6px 6px 2px; resize: vertical; min-height: 44px; }
.comment-box .comment-previews, .comment-box .comment-chips { padding: 0 6px; }
.comment-tools { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.comment-tools .comment-attach, .comment-tools .comment-attach:hover { cursor: pointer; color: var(--muted); }
.comment-tools .comment-send { margin-left: auto; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.comment-tools .comment-send .icon { width: 16px; height: 16px; margin-left: -2px; }
.comment-attach input[type=file] { display: none !important; }

/* ===== Окно «Файлы проекта» (прикрепить версию документа к комментарию) ===== */
.file-picker-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .35); }
.file-picker {
  width: min(680px, 100%); max-height: min(78vh, 720px); overflow: auto;
  padding: 18px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-hover);
}
.file-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.file-picker-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.file-picker-search { width: 100%; margin-bottom: 12px; }
.picker-folder > summary { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.picker-folder > summary::-webkit-details-marker { display: none; }
.picker-folder > summary:hover { background: var(--grey-soft); }
.picker-folder > summary .icon { width: 16px; height: 16px; color: var(--accent); }
.picker-folder-body { padding-left: 20px; border-left: 1px solid var(--border); margin-left: 11px; }
.picker-doc { display: grid; grid-template-columns: 16px minmax(0, 1fr) 230px auto; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-sm); }
.picker-doc:hover { background: var(--surface-2); }
.picker-doc > .icon { width: 16px; height: 16px; color: var(--muted); }
.picker-doc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-doc select.picker-version { height: 32px; font-size: 13px; padding: 0 8px; }
.picker-doc .picker-attach { height: 32px; padding: 0 12px; }
.picker-empty { padding: 4px 8px; }
.comment-doc a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.comment-doc-download { color: var(--muted) !important; }
.comment-doc-download:hover { color: var(--link) !important; }
@media (max-width: 640px) { .picker-doc { grid-template-columns: 16px 1fr; } .picker-doc select, .picker-doc .picker-attach { grid-column: 2; } }

/* ===== Свои поля задач ===== */
input.field-number { width: 120px; }
input.field-text { width: 100%; }
.field-percent { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.task-table td[data-col^="cf"] input { width: 100%; }
.field-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: none; }
.field-rename { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; }
.field-rename input { max-width: 300px; }

/* ===== Круглая галочка «выполнено» у задачи и раздела (левый край таблицы) ===== */
input.round-check {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 0 8px 0 0; padding: 0;
  border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface) no-repeat center / 11px;
  vertical-align: middle; cursor: pointer; transition: background-color .12s, border-color .12s;
}
/* Галочка внутри: серая при наведении, белая на зелёном, когда выполнено */
input.round-check:hover:not(:disabled) {
  border-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%2318914f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input.round-check:checked {
  border-color: var(--ok); background-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input.round-check:disabled { cursor: default; }
input.round-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.round-check-space { display: inline-block; width: 18px; margin-right: 8px; flex: none; }
.section-head input.round-check { width: 20px; height: 20px; margin-right: 2px; }
.section-head .round-check-space { width: 20px; margin-right: 2px; }

/* Значки типа колонки в заголовках таблицы задач */
.th-icon { width: 14px; height: 14px; margin-right: 6px; color: #a19f9a; vertical-align: -2px; }

/* ===== Оформление в духе Notion (27.10.2026) — уточняет правила выше ===== */
.task-table td { border-right: 1px solid var(--border); }
.task-table td:last-child, .task-table td.col-filler { border-right: none; }
.task-table th { border-right: 1px solid var(--border); }
.section-row td { background: #fff; border-right: none !important; padding: 18px 10px 6px; }
input.section-name, .section-name.static { font-size: 15px; font-weight: 600; }
.add-row td { border-right: none !important; }

/* Подписи свойств и заголовки панели — обычными буквами */
.details dt, .panel-subtitle { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }

/* ===== Задача как страница Notion: свойства строками «значок · название — значение» ===== */
.task-sheet { max-width: 900px; }
.details.props, .panel-section .details.props { display: block; }
.details.props > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 8px; padding: 2px 0; border-radius: 8px; }
.details.props > div:hover { background: rgba(55, 53, 47, .03); }
.details.props dt { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding-left: 6px;
  color: var(--muted); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.details.props dt .icon { width: 16px; height: 16px; color: #a19f9a; }
.details.props dd { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-height: 32px; padding: 1px 0 1px 8px; }
.details.props dd > div { flex-basis: 100%; }  /* подсказки под значением — отдельной строкой */
.details.props dd > .hint, .details.props dd > .small { margin: 0 0 4px; }
/* Значения без рамок, как в Notion: рамка и фон появляются при наведении и вводе */
.details.props input.inline-input { width: 200px; height: 30px; border-color: transparent; background: transparent; padding: 0 8px; margin-left: -8px; }
.details.props input.inline-input:hover { background: var(--hover); }
.details.props input.inline-input:focus { background: #fff; border-color: rgba(55, 53, 47, .35); }
.panel-section .details.props > div { grid-template-columns: 150px minmax(0, 1fr); }
.sheet-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.sheet-section > h2, .sheet-section .card-head h2 { font-size: 16px; }
.sheet-section .card-head { margin-bottom: 10px; }