/*
  Палитра — брендбук АРКО (arturfgm-byte.github.io/arko-brandbook, 2026-09-14):
  красный #FF0000 — единственный цветовой акцент, держать скупо (~3% площади,
  никогда не заливка больших блоков); чёрный/белый — текст и фон; серые —
  структура (разделители, подложки, второстепенный текст).
  Шрифты: Montserrat (заголовки, 600–800) + Golos Text (текст, 400–500).
*/
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --panel: #ffffff;
  --border: #d9dada;
  --text: #000000;
  --muted: #8a8a8a;
  --accent: #ff0000;
  --accent-soft: #f5f5f5;
  --danger: #ff0000;
  --danger-soft: #ffeaea;
  --warn: #000000;
  --warn-soft: #d9dada;
  --ok: #a0a0a0;
  --ok-soft: #f5f5f5;
  --bubble-mine: #f5f5f5;
  --bubble-other: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --bg-soft: #1c1c1c;
    --panel: #1a1a1a;
    --border: #333333;
    --text: #ffffff;
    --muted: #9a9a9a;
    --accent: #ff3333;
    --accent-soft: #241414;
    --danger: #ff3333;
    --danger-soft: #241414;
    --warn: #ffffff;
    --warn-soft: #333333;
    --ok: #808080;
    --ok-soft: #1e1e1e;
    --bubble-mine: #241414;
    --bubble-other: #232323;
  }
}
:root[data-theme="dark"] {
  --bg: #121212;
  --bg-soft: #1c1c1c;
  --panel: #1a1a1a;
  --border: #333333;
  --text: #ffffff;
  --muted: #9a9a9a;
  --accent: #ff3333;
  --accent-soft: #241414;
  --danger: #ff3333;
  --danger-soft: #241414;
  --warn: #ffffff;
  --warn-soft: #232323;
  --ok: #c9c9c9;
  --ok-soft: #232323;
  --bubble-mine: #241414;
  --bubble-other: #232323;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1 {
  font: 800 16px/1.3 "Montserrat", sans-serif;
  margin: 0 0 4px;
}
h2 {
  font: 600 12px/1.3 "Montserrat", sans-serif;
  color: var(--muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
  position: sticky; top: 0; z-index: 20;
}
.icon-btn {
  display: none; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 15px;
}
.tabs { display: flex; gap: 6px; flex: 1; }
.tab-btn {
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.tab-btn.active { background: var(--bg-soft); border-color: var(--text); color: var(--text); font-weight: 700; }

.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
select, input, textarea, button {
  font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
}
button { cursor: pointer; font-family: "Montserrat", sans-serif; font-weight: 600; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
button.ghost { background: transparent; }
button:disabled { opacity: 0.5; cursor: default; }
.tab-btn, .proj-btn, .sec-btn, .cal-mode-btn { font-family: "Montserrat", sans-serif; font-weight: 600; }

.appshell {
  flex: 1;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 360px;
  min-height: 0;
}

/* Сайдбар — вспомогательная навигация, должна визуально "отступать" на
   второй план, а не соревноваться по контрасту с рабочей областью (см.
   находки по Linear/аналогам: nav dimmer, main content takes precedence). */
.sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg);
  padding: 20px 10px;
  overflow-y: auto;
}
.sidebar h2 { padding: 0 10px; }
.project-nav { display: flex; flex-direction: column; gap: 2px; }
.proj-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  text-align: left; border: 1px solid transparent; background: transparent; color: var(--muted);
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.proj-btn:hover { background: var(--panel); color: var(--text); }
.proj-btn.active { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: inset 2px 0 0 var(--text); }
.proj-btn .count { color: var(--muted); font-size: 11px; }
.proj-btn.active .count { color: var(--text); }

.section-list { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 14px; padding-left: 8px; border-left: 1px solid var(--border); }
.sec-btn {
  text-align: left; border: none; background: transparent; color: var(--muted);
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.sec-btn:hover { background: var(--panel); color: var(--text); }
.sec-btn.active { color: var(--text); font-weight: 700; }
.add-section-form { margin-top: 2px; }
.add-section-form input {
  width: 100%; border: 1px dashed var(--border); background: transparent; font-size: 12px;
  padding: 5px 8px; color: var(--muted);
}
.add-section-form input:focus { color: var(--text); border-style: solid; }

.center { padding: 16px; overflow-y: auto; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.current-project-label { font: 700 13px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); margin-right: auto; }

.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg);
}
.task-row:hover { border-color: var(--text); }
.task-row.selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.task-row .title { flex: 1; min-width: 120px; }
.task-row .meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.badge { font: 700 11px "Montserrat", sans-serif; padding: 2px 8px; border-radius: 3px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; }
.badge.новая { background: var(--bg-soft); color: var(--muted); }
.badge.в-работе { background: var(--warn-soft); color: var(--warn); }
.badge.готово { background: var(--ok-soft); color: var(--ok); }
.badge.проблема { background: var(--danger-soft); color: var(--danger); }
.overdue { color: var(--danger); font-weight: 600; }

.new-task-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.new-task-form input[type="text"] { flex: 1; min-width: 180px; }

.calendar-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.calendar-nav { display: flex; align-items: center; gap: 8px; }
.calendar-nav span { font-weight: 600; min-width: 140px; text-align: center; }
.view-toggle { display: flex; gap: 4px; }
.cal-mode-btn {
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.cal-mode-btn.active { background: var(--bg-soft); border-color: var(--text); color: var(--text); font-weight: 700; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekday { font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal-day {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-height: 84px;
  display: flex; flex-direction: column; gap: 4px; background: var(--bg);
}
.cal-day.outside { opacity: 0.4; }
.cal-day.today { border-color: var(--accent); }
.cal-day-num { font-size: 12px; color: var(--muted); }
.cal-chip {
  font-size: 11px; padding: 2px 6px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip.новая { background: var(--bg-soft); color: var(--muted); }
.cal-chip.в-работе { background: var(--warn-soft); color: var(--warn); }
.cal-chip.готово { background: var(--ok-soft); color: var(--ok); }
.cal-chip.проблема { background: var(--danger-soft); color: var(--danger); }

.calendar-agenda { display: flex; flex-direction: column; gap: 14px; }
.agenda-day-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.agenda-day-label.overdue { color: var(--danger); }

.membership-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.membership-table th, .membership-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.membership-table input[type="checkbox"] { transform: scale(1.1); }
.not-connected { color: var(--muted); font-style: italic; }
.hint { color: var(--muted); }

/* ---------- Панель задачи (справа) — карточка + чат ---------- */
.task-panel {
  border-left: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.task-panel-header { padding: 16px; border-bottom: 1px solid var(--border); }
.task-panel-header .close-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.task-panel-meta { color: var(--muted); font-size: 12px; margin: 4px 0; }
.task-panel-desc { font-size: 13px; margin: 8px 0; }
.status-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }

.task-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.task-chat-feed { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 90%; padding: 8px 10px; border-radius: 10px; background: var(--bubble-other); font-size: 13px; }
.chat-bubble.mine { align-self: flex-end; background: var(--bubble-mine); }
.chat-bubble.system { align-self: center; background: transparent; color: var(--muted); font-size: 12px; max-width: 100%; text-align: center; }
.chat-bubble .who { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.chat-bubble .when { font-size: 10px; color: var(--muted); margin-top: 2px; }
.task-chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.task-chat-form textarea { flex: 1; resize: none; }
.task-panel-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); padding: 20px; text-align: center; }

.subtasks { border-top: 1px solid var(--border); margin: 12px 16px 0; padding-top: 12px; }
.subtasks .task-row { padding: 6px 10px; }
.add-subtask-form { display: flex; gap: 6px; margin-top: 8px; }
.add-subtask-form input { flex: 1; font-size: 12px; }
.add-subtask-form button { font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .appshell { grid-template-columns: minmax(0, 1fr); }
  .icon-btn { display: inline-block; }
  .sidebar {
    position: fixed; top: 49px; bottom: 0; left: 0; width: 240px; z-index: 15;
    transform: translateX(-100%); transition: transform 0.15s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 12px rgba(0,0,0,0.2); }
  .task-panel {
    position: fixed; inset: 49px 0 0 0; z-index: 25; border-left: none;
  }
  .task-panel[hidden] { display: none; }
  .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .cal-day { min-height: 56px; padding: 4px; }
  .cal-chip { font-size: 10px; }
  .calendar-nav span { min-width: 100px; }
}