/* Тёмная тема для демо Tree Outliner.
 *
 * Живёт отдельным файлом нарочно: сами демо приходят из репозитория продукта
 * (Materials/Tree Outliner/*.html) и обновляются оттуда целиком. Перенос новой
 * версии — копирование плюс одна строка <link> в <head>; тема при этом остаётся
 * здесь и не переписывается заново.
 *
 * Два входа:
 *   :root[data-theme="dark"]  — страница сайта ставит атрибут в рамку снаружи;
 *   prefers-color-scheme      — для файла, открытого самого по себе, и только
 *                               если светлая тема не выставлена явно.
 *
 * Линии дерева демо рисует в SVG атрибутом stroke. CSS-свойство stroke сильнее
 * атрибута, поэтому #svg line и #svg path перекрываются отсюда без !important.
 */

:root[data-theme="dark"] {
  --accent: #0a84ff;
  --txt: #f2f2f5;
  --sec: #9c9ca6;
  --ter: #6f6f7a;
  --line: #55555f;
  --fill: rgba(255, 255, 255, .09);
  --glass: rgba(60, 60, 66, .74);
  --edge: rgba(255, 255, 255, .13);
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
  background: linear-gradient(160deg, #2b2d33, #1b1d21);
}

/* окно */
:root[data-theme="dark"] .win {
  background: #1e1f24;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .14);
}

:root[data-theme="dark"] .win.solo { background: transparent; box-shadow: none; }

/* боковая панель */
:root[data-theme="dark"] .lib { background: #26272c; }
:root[data-theme="dark"] .plain { color: #b2b2bb; }
:root[data-theme="dark"] .search { background: rgba(255, 255, 255, .08); color: #9c9ca6; }
:root[data-theme="dark"] .row.sel { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .row svg { stroke: #9c9ca6; }
:root[data-theme="dark"] .row.sel svg { stroke: var(--accent); }
:root[data-theme="dark"] .row:not(.sel):hover { background: rgba(255, 255, 255, .06); }

/* тулбар и вкладки */
:root[data-theme="dark"] .cap button { color: #dcdce2; }
:root[data-theme="dark"] .cap button.on { background: rgba(255, 255, 255, .15); }
:root[data-theme="dark"] .cap {
  box-shadow: 0 0 0 .5px var(--edge), 0 1px 4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-theme="dark"] .tabstrip { background: rgba(0, 0, 0, .32); }
:root[data-theme="dark"] .tab { color: #9c9ca6; }
:root[data-theme="dark"] .tab.on {
  background: #3a3b41; color: var(--txt);
  box-shadow: 0 0 0 .5px var(--edge), 0 1px 3px rgba(0, 0, 0, .4);
}
:root[data-theme="dark"] .tabadd { color: #b2b2bb; box-shadow: 0 0 0 .5px var(--edge), 0 1px 3px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .lblmenu {
  background: rgba(44, 45, 50, .95);
  box-shadow: 0 0 0 .5px var(--edge), 0 10px 30px rgba(0, 0, 0, .5);
}

/* дерево и список */
:root[data-theme="dark"] #svg line { stroke: var(--line); }
:root[data-theme="dark"] #svg path { stroke: #9c9ca6; }
:root[data-theme="dark"] .tw { color: #8c8c96; }
:root[data-theme="dark"] .cb { background: #3a3b41; }
:root[data-theme="dark"] .cb.on { background: var(--accent); }
:root[data-theme="dark"] .node.sel .body {
  background: rgba(10, 132, 255, .24); border-color: rgba(10, 132, 255, .5);
}
:root[data-theme="dark"] .node.edit .body { background: #2a2b31; }

/* инспектор */
:root[data-theme="dark"] .insp { background: #232429; }
:root[data-theme="dark"] .seg { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .seg button { color: #dcdce2; }
:root[data-theme="dark"] .seg button.on {
  background: #3a3b41; box-shadow: 0 0 0 .5px var(--edge), 0 1px 2px rgba(0, 0, 0, .4);
}
:root[data-theme="dark"] .in { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .sw i.none { background: #3a3b41; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .sw i.on { box-shadow: 0 0 0 2px #232429, 0 0 0 3.5px var(--accent); }
:root[data-theme="dark"] .chip { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .chip.on { background: var(--accent); }
:root[data-theme="dark"] .k { border-bottom-color: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] kbd {
  background: #3a3b41; color: #e6e6ec; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .22);
}

/* кружок свёртки ветки: демо рисует его белым поверх линии */
:root[data-theme="dark"] #svg g[data-k] circle { fill: #2a2b31; stroke: #6f6f7a; }
/* кружки внутри иконок — они закрывают линию и красятся под фон панели */
:root[data-theme="dark"] .lib .plain svg circle { fill: #26272c; }
:root[data-theme="dark"] .seg button svg circle { fill: #2b2c31; }
:root[data-theme="dark"] .seg button.on svg circle { fill: #3a3b41; }

/* панель команд */
:root[data-theme="dark"] .pal {
  background: rgba(42, 43, 48, .86);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .palq { background: rgba(255, 255, 255, .09); color: #9c9ca6; }
:root[data-theme="dark"] .palr.off.sel { background: rgba(255, 255, 255, .09); }

/* Файл, открытый отдельно, идёт за системой — но не спорит с выставленной светлой. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #0a84ff; --txt: #f2f2f5; --sec: #9c9ca6; --ter: #6f6f7a;
    --line: #55555f; --fill: rgba(255, 255, 255, .09); --glass: rgba(60, 60, 66, .74); --edge: rgba(255, 255, 255, .13); }
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body { background: linear-gradient(160deg, #2b2d33, #1b1d21); }
  :root:not([data-theme="light"]) .win { background: #1e1f24; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .14); }
  :root:not([data-theme="light"]) .win.solo { background: transparent; box-shadow: none; }
  :root:not([data-theme="light"]) .lib { background: #26272c; }
  :root:not([data-theme="light"]) .plain { color: #b2b2bb; }
  :root:not([data-theme="light"]) .search { background: rgba(255, 255, 255, .08); color: #9c9ca6; }
  :root:not([data-theme="light"]) .row.sel { background: rgba(255, 255, 255, .1); }
  :root:not([data-theme="light"]) .row svg { stroke: #9c9ca6; }
  :root:not([data-theme="light"]) .row.sel svg { stroke: var(--accent); }
  :root:not([data-theme="light"]) .row:not(.sel):hover { background: rgba(255, 255, 255, .06); }
  :root:not([data-theme="light"]) .cap button { color: #dcdce2; }
  :root:not([data-theme="light"]) .cap button.on { background: rgba(255, 255, 255, .15); }
  :root:not([data-theme="light"]) .cap { box-shadow: 0 0 0 .5px var(--edge), 0 1px 4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .tabstrip { background: rgba(0, 0, 0, .32); }
  :root:not([data-theme="light"]) .tab { color: #9c9ca6; }
  :root:not([data-theme="light"]) .tab.on { background: #3a3b41; color: var(--txt); box-shadow: 0 0 0 .5px var(--edge), 0 1px 3px rgba(0, 0, 0, .4); }
  :root:not([data-theme="light"]) .tabadd { color: #b2b2bb; }
  :root:not([data-theme="light"]) .lblmenu { background: rgba(44, 45, 50, .95); }
  :root:not([data-theme="light"]) #svg line { stroke: var(--line); }
  :root:not([data-theme="light"]) #svg path { stroke: #9c9ca6; }
  :root:not([data-theme="light"]) .tw { color: #8c8c96; }
  :root:not([data-theme="light"]) .cb { background: #3a3b41; }
  :root:not([data-theme="light"]) .cb.on { background: var(--accent); }
  :root:not([data-theme="light"]) .node.sel .body { background: rgba(10, 132, 255, .24); border-color: rgba(10, 132, 255, .5); }
  :root:not([data-theme="light"]) .node.edit .body { background: #2a2b31; }
  :root:not([data-theme="light"]) .insp { background: #232429; }
  :root:not([data-theme="light"]) .seg { background: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .seg button { color: #dcdce2; }
  :root:not([data-theme="light"]) .seg button.on { background: #3a3b41; }
  :root:not([data-theme="light"]) .in { background: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) .sw i.none { background: #3a3b41; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
  :root:not([data-theme="light"]) .sw i.on { box-shadow: 0 0 0 2px #232429, 0 0 0 3.5px var(--accent); }
  :root:not([data-theme="light"]) .chip { background: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) .chip.on { background: var(--accent); }
  :root:not([data-theme="light"]) .k { border-bottom-color: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) kbd { background: #3a3b41; color: #e6e6ec; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) #svg g[data-k] circle { fill: #2a2b31; stroke: #6f6f7a; }
  :root:not([data-theme="light"]) .lib .plain svg circle { fill: #26272c; }
  :root:not([data-theme="light"]) .seg button svg circle { fill: #2b2c31; }
  :root:not([data-theme="light"]) .seg button.on svg circle { fill: #3a3b41; }
  :root:not([data-theme="light"]) .pal { background: rgba(42, 43, 48, .86); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07); }
  :root:not([data-theme="light"]) .palq { background: rgba(255, 255, 255, .09); color: #9c9ca6; }
  :root:not([data-theme="light"]) .palr.off.sel { background: rgba(255, 255, 255, .09); }
}