/* WebPIM — тема и компоновка (разделы 6–9 ТЗ). Светлая/тёмная через CSS-переменные. */

:root {
  --tree-w: 220px;
  --list-h: 130px;
  --bg: #ffffff;
  --bg-alt: #f4f5f7;
  --bg-panel: #fafbfc;
  --fg: #1f2328;
  --fg-dim: #6b7280;
  --border: #e2e4e8;
  --accent: #3b8bd4;
  --font-prose: "Carlito", Calibri, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Inconsolata", "JetBrains Mono", "Fira Mono", monospace;
}

body.dark {
  --bg: #1a1c20;
  --bg-alt: #22252b;
  --bg-panel: #1f2227;
  --fg: #e6e8eb;
  --fg-dim: #9aa3ad;
  --border: #31353c;
  --accent: #4d9de0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-prose);
  color: var(--fg);
  background: var(--bg);
  font-size: 14px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

/* --- Верхняя панель --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; color: var(--accent); margin-right: 8px; }
.topbar .spacer { flex: 1; }
.topbar button, .toolbar button {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 13px;
}
.topbar button:hover, .toolbar button:hover { border-color: var(--accent); }
.topbar .tb-link { display: inline-flex; align-items: center; text-decoration: none; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 13px; }
.topbar .tb-link:hover { border-color: var(--accent); }

/* --- Рабочая область --- */
.workspace {
  display: grid;
  grid-template-columns: var(--tree-w) 5px 1fr;
  min-height: 0;
}
.divider-v { cursor: col-resize; background: var(--border); }
.divider-h { cursor: row-resize; background: var(--border); height: 5px; }

#tree-panel { overflow: auto; background: var(--bg-panel); border-right: 1px solid var(--border); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; font-weight: 600; color: var(--fg-dim);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-panel);
}
#tree { padding: 4px; }

.center { display: grid; grid-template-rows: var(--list-h) 5px 1fr; min-height: 0; min-width: 0; }
#list-panel { overflow: auto; background: var(--bg); border-bottom: 1px solid var(--border); }
.article-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.article-row:hover { background: var(--bg-alt); }
.article-row.active { background: var(--accent); color: #fff; }
.article-label { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-all { font-weight: 400; font-size: 12px; color: var(--fg-dim); cursor: pointer; display: flex; align-items: center; gap: 3px; }
#bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
#bulk-bar #bulk-count { font-size: 12px; color: var(--fg-dim); margin-right: auto; }
#bulk-bar button { padding: 2px 8px; font-size: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 5px; cursor: pointer; }
#bulk-bar button:hover { background: var(--accent); color: #fff; }

#editor-panel { display: flex; flex-direction: column; min-height: 0; }
.editor-head { border-bottom: 1px solid var(--border); padding: 6px 10px; background: var(--bg-panel); }
#editor-title {
  width: 100%; border: none; background: transparent; color: var(--fg);
  font-size: 20px; font-weight: 700; outline: none; margin-bottom: 6px;
}
.toolbar { display: flex; gap: 4px; flex-wrap: wrap; }

#editor { flex: 1; overflow: auto; padding: 20px 28px; }
#editor .ProseMirror { max-width: var(--editor-w, 720px); margin: 0 auto; outline: none; line-height: 1.7; }
#editor .ProseMirror:focus { outline: none; }
#editor pre { background: var(--bg-alt); padding: 10px; border-radius: 6px; font-family: var(--font-mono); overflow: auto; }
#editor code { font-family: var(--font-mono); }

/* --- Статус-бар --- */
.statusbar {
  display: flex; gap: 16px; align-items: center;
  padding: 4px 12px; background: var(--bg-panel);
  border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12px;
}
#save-status[data-status="saved"] { color: #2f9e44; }
#save-status[data-status="saving"] { color: var(--fg-dim); }
#save-status[data-status="error"] { color: #e03131; }
#save-status[data-status="locked"] { color: #f08c00; }
.statusbar .spacer { flex: 1; }

/* --- Режимы компоновки --- */
body.mode-nolist #list-panel,
body.mode-nolist .center > .divider-h { display: none; }
body.mode-nolist .center { grid-template-rows: 1fr; }

body.mode-focus #tree-panel,
body.mode-focus .workspace > .divider-v,
body.mode-focus #list-panel,
body.mode-focus .center > .divider-h { display: none; }
body.mode-focus .workspace { grid-template-columns: 1fr; }
body.mode-focus .center { grid-template-rows: 1fr; }

/* --- Режим чтения --- */
body.read-mode .toolbar,
body.read-mode #list-panel,
body.read-mode .center > .divider-h { display: none; }

/* Блокировка записи статьи (read_only, раздел 26): визуальный индикатор. */
body.article-readonly #editor { background:
  repeating-linear-gradient(45deg, transparent, transparent 11px, var(--bg-alt) 11px, var(--bg-alt) 12px); }
body.article-readonly #editor .ProseMirror { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
body.article-readonly #editor-title { opacity: .7; }

/* --- Логин --- */
.login-wrap { display: grid; place-items: center; height: 100vh; }
.login-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px; width: 320px; display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { margin: 0 0 6px; color: var(--accent); font-size: 22px; }
.login-card input {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
.login-card button {
  padding: 10px; border: none; border-radius: 7px; background: var(--accent);
  color: #fff; font-size: 15px; cursor: pointer;
}
.login-error { color: #e03131; font-size: 13px; min-height: 16px; }

/* --- Формулы (раздел 10) --- */
.math-node { cursor: pointer; }
.math-inline { display: inline-block; padding: 0 1px; }
.math-block { display: block; text-align: center; margin: 10px 0; }
.math-node:hover { background: var(--bg-alt); border-radius: 3px; }
.math-overlay {
  position: absolute; z-index: 1000; width: 370px; padding: 10px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.math-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.math-palette button {
  min-width: 34px; padding: 4px 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); border-radius: 6px;
}
.math-palette button:hover { border-color: var(--accent); }
.math-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.math-actions { display: flex; justify-content: space-between; margin-top: 8px; }
.math-actions button {
  padding: 5px 12px; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg);
}
.math-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Таблицы (раздел 11) --- */
#editor table { border-collapse: collapse; margin: 10px 0; width: auto; }
#editor td, #editor th { border: 1px solid var(--border); padding: 5px 8px; min-width: 36px; vertical-align: top; position: relative; }
#editor th { background: var(--bg-alt); font-weight: 700; }
#editor .selectedCell { background: rgba(59,139,212,.16); }
#editor .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 3px; background: var(--accent); pointer-events: none; }
/* Внутренние ссылки (раздел 24): обычная — пунктир акцентом, битая — красное подчёркивание. */
a[data-internal] { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
a[data-broken] { color: #e03131; border-bottom: 1px dashed #e03131; }
/* Панель backlinks (раздел 24) */
.backlinks-panel { padding: 8px 12px 12px; border-top: 1px solid var(--border); font-size: 13px; }
.backlinks-title { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.backlinks-list { list-style: none; margin: 0; padding: 0; }
.backlinks-list li { padding: 2px 0; }
.backlinks-list a { color: var(--accent); text-decoration: none; cursor: pointer; }
.backlinks-list a:hover { text-decoration: underline; }

#editor .tableWrapper { overflow: visible; margin: 6px 0; }
#editor .tableWrapper:has(table[data-float="left"]) { float: left; width: 46%; margin: 0 16px 8px 0; }
#editor .tableWrapper:has(table[data-float="right"]) { float: right; width: 46%; margin: 0 0 8px 16px; }
#editor .tableWrapper:has(table[data-float]) table { width: 100%; }
.table-toolbar {
  position: absolute; z-index: 900; display: flex; gap: 3px; flex-wrap: wrap; max-width: 540px;
  padding: 4px 6px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.24);
}
.table-toolbar button {
  padding: 3px 6px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); border-radius: 5px;
}
.table-toolbar input[type=range] { width: 84px; }

/* --- Контентные блоки (раздел 12) --- */
.block { border-radius: 8px; margin: 10px 0; border: 1px solid var(--border); overflow: hidden; }
.block-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; font-weight: 600; font-size: 13px; background: var(--bg-alt); user-select: none;
}
.block-header button {
  font-size: 12px; padding: 2px 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 5px;
}
.block-body { padding: 8px 12px; }
.block.collapsed .block-body { display: none; }
.block-info { border-left: 4px solid #3b8bd4; }
.block-warn { border-left: 4px solid #f0a000; }
.block-tip { border-left: 4px solid #2f9e44; }
.block-danger { border-left: 4px solid #e03131; }
.block-highlight { border-left: 4px solid #f08c00; background: rgba(240,140,0,.06); }
.block-quote { border-left: 4px solid var(--fg-dim); font-style: italic; }
.block-ref { border-left: 4px solid var(--fg-dim); background: var(--bg-alt); }
.block-details { border-left: 4px solid var(--accent); }
.block-code { border-left: 4px solid var(--fg-dim); }
.block-code pre { margin: 0; padding: 10px 12px; overflow: auto; background: var(--bg-alt); }
.block-code pre, .block-code code { font-family: var(--font-mono); }

/* Чеклист (раздел 12) */
#editor ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
#editor ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
#editor ul[data-type="taskList"] li > label { margin-top: 3px; }

/* Highlight.js — компактная тема, работает в светлой и тёмной */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name { color: #c0392b; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet { color: #2f9e44; }
.hljs-number, .hljs-built_in, .hljs-meta { color: #1971c2; }
.hljs-comment, .hljs-quote { color: var(--fg-dim); font-style: italic; }
.hljs-title, .hljs-section, .hljs-selector-id { color: #9c36b5; }
.hljs-type, .hljs-class .hljs-title { color: #e8590c; }

/* --- /-команды, контекстный тулбар, ширина (раздел 9) --- */
.slash-menu, .bubble-toolbar {
  position: absolute; z-index: 1000; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.26);
}
.slash-menu { width: 220px; max-height: 280px; overflow: auto; padding: 4px; }
.slash-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.slash-item.active, .slash-item:hover { background: var(--accent); color: #fff; }
.bubble-toolbar { display: flex; gap: 2px; padding: 3px 4px; }
.bubble-toolbar button {
  padding: 3px 8px; cursor: pointer; border: 1px solid transparent; background: transparent;
  color: var(--fg); border-radius: 5px; font-size: 14px;
}
.bubble-toolbar button:hover { background: var(--bg-alt); }
.tb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 3px; }
#editor-width { width: 90px; vertical-align: middle; }
#editor mark { background: #fff3a0; padding: 0 2px; border-radius: 2px; }
body.dark #editor mark { background: #5c5320; color: #fff; }

/* --- Контекстное меню дерева (раздел 15) --- */
.ctx-menu {
  position: absolute; z-index: 1100; min-width: 180px; padding: 4px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.ctx-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ctx-item:hover { background: var(--accent); color: #fff; }
.ctx-item.disabled { color: var(--fg-dim); cursor: default; }
.ctx-item.disabled:hover { background: transparent; color: var(--fg-dim); }
/* Fancytree dnd5 insertion marker — видимость */
.fancytree-drop-accept .fancytree-title { outline: 2px solid var(--accent); border-radius: 3px; }

/* --- Модальные панели: история/корзина (раздел 18) --- */
.editor-title-row { display: flex; align-items: center; gap: 8px; }
.editor-title-row #editor-title { margin-bottom: 0; }
.editor-title-row button { background: var(--bg-alt); border: 1px solid var(--border); color: var(--fg); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  background: rgba(0,0,0,.35);
}
.modal-card {
  width: 520px; max-width: 92vw; max-height: 80vh; overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.modal-card.preview { padding: 24px 28px; background: var(--bg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.modal-head button { background: none; border: none; color: var(--fg-dim); font-size: 16px; cursor: pointer; }
.modal-body { padding: 10px 16px; }
.modal-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.modal-row span { flex: 1; }
.modal-row button { padding: 3px 10px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); border-radius: 6px; cursor: pointer; font-size: 12px; }
.modal-subhead { font-weight: 700; }
.modal-actions { justify-content: flex-end; }
.modal-choice { display: block; width: 100%; margin-bottom: 4px; padding: 6px 10px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); border-radius: 6px; cursor: pointer; }
.modal-choice:hover { border-color: var(--accent); }

/* --- Теги (раздел 14) --- */
.editor-tags-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.editor-tags-row .tags-label { color: var(--fg-dim); }
#article-tags {
  flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  border-radius: 6px; padding: 3px 8px; font-size: 13px;
}

/* --- Админка и самообслуживание (Фаза 3, разделы 27-28) --- */
.admin-wrap { padding: 16px 22px; overflow: auto; }
.admin-link { color: var(--accent); text-decoration: none; margin-right: 8px; }
.admin-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.metric { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; min-width: 130px; }
.metric-val { font-size: 20px; font-weight: 700; }
.metric-lbl { color: var(--fg-dim); font-size: 12px; }
.admin-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.admin-card h3 { margin: 0 0 10px; }
.admin-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-form input, .admin-form select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
.admin-form button, .admin-search + button { padding: 6px 12px; border: 1px solid var(--border); background: var(--accent); color: #fff; border-radius: 6px; cursor: pointer; }
.admin-search { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); margin-right: 8px; min-width: 220px; }
.admin-note { margin-top: 8px; color: var(--fg-dim); font-size: 13px; word-break: break-all; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.admin-table th { color: var(--fg-dim); }
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
button.mini { font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); border-radius: 5px; cursor: pointer; }
.account-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.account-row span { flex: 1; }
/* Дашборд базы знаний (раздел 26) */
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-cols .admin-card { margin-bottom: 0; }
@media (max-width: 720px) { .dash-cols { grid-template-columns: 1fr; } }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; line-height: 1.8; }
.tag-chip { color: var(--accent); cursor: default; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.dash-list a { color: var(--accent); text-decoration: none; }
.dash-list a:hover { text-decoration: underline; }
.dash-when { color: var(--fg-dim); font-size: 12px; }
.dash-badge { color: var(--fg-dim); font-weight: 400; font-size: 13px; }
#dash-activity svg { max-width: 100%; }
#dash-top-words a, #dash-top-links a { color: var(--accent); text-decoration: none; }
/* Граф знаний (раздел 25) */
.graph-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 2000; display: flex; flex-direction: column; }
.graph-header { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.graph-header span { flex: 1; }
.graph-close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--fg-dim); }
.graph-controls { padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; gap: 12px; }
.graph-svg { flex: 1; display: block; }
.graph-info { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.graph-info a { color: var(--accent); }
/* Мобильный read-only (раздел 20) */
.mobile-app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.m-header { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.m-brand { flex: 1; color: var(--accent); }
.m-main { flex: 1; overflow: hidden; position: relative; }
.m-panel, .m-content { position: absolute; inset: 0; overflow-y: auto; padding: 10px 14px; }
.m-search-row { margin-bottom: 8px; }
.m-search-row input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--fg); font-size: 15px; }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-item { border-bottom: 1px solid var(--border); }
.m-item a { display: block; padding: 10px 4px; color: var(--fg); text-decoration: none; font-size: 15px; }
.m-item a:active { background: var(--bg-alt); }
.m-item.m-empty { color: var(--fg-dim); padding: 10px 4px; }
.m-article-title { font-size: 22px; margin: 0 0 6px; }
.m-article-tags { color: var(--fg-dim); font-size: 12px; margin-bottom: 12px; }
.m-article-body { font-size: 16px; line-height: 1.65; }
.m-article-body h1,.m-article-body h2,.m-article-body h3 { margin: 1.2em 0 .4em; }
.m-article-body p { margin: .7em 0; }
.m-article-body pre { overflow-x: auto; background: var(--bg-alt); padding: 10px; border-radius: 6px; }
.m-article-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); }
.m-article-actions button { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); cursor: pointer; color: var(--fg); }
.m-nav { display: flex; border-top: 1px solid var(--border); background: var(--bg-panel); }
.m-nav-btn { flex: 1; padding: 10px 0 8px; font-size: 20px; border: none; background: none; cursor: pointer; color: var(--fg-dim); }
.m-nav-btn.active { color: var(--accent); border-top: 2px solid var(--accent); }
@media (min-width: 768px) { .mobile-app .m-main { max-width: 640px; margin: 0 auto; } }