/* static/flow.css — схема потоков: батарея, инвертер, сеть, потребитель.
   Одна на обе страницы: плитка инвертера на сводке и схема Deye рисуются
   одной функцией (static/js/flow_svg.js) и красятся этими правилами.
   Раньше правила жили двумя копиями — в overview.css и в deye.css.

   Корпус инвертера и батарея нарисованы вектором и намеренно светлые: это
   предметы, а не значки, и красить их под тему нельзя — Deye белый и в
   тёмной комнате. Цвет надписей — переменная --text-main страницы. */
.flow { margin: 2px 0 16px; }
.flow svg { width: 100%; height: auto; display: block; overflow: visible; }

.flow text { text-anchor: middle; }
.fl-val, .fl-lab { fill: var(--text-main); }
.fl-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Подписи узлов полным цветом темы: приглушённые серые тонули и на
   тёмном фоне, и на светлом — читать приходилось с усилием. */
.fl-lab { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* Опора и дом — штриховые значки, они красятся под тему */
.fl-ico {
    fill: none; stroke: var(--text-main); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.8;
}
.fl-node.fl-off .fl-ico { stroke: var(--danger-color); opacity: 1; }
.fl-node.fl-off .fl-val { fill: #ff3b30; }

/* Состояние сети кричит цветом: это то, ради чего на схему смотрят в
   тревожную минуту. Приглушённый серый тут не годится. */
.fl-state-on  { fill: #22e04a !important; font-weight: 800; }
.fl-state-off { fill: #ff3b30 !important; font-weight: 800; }

/* Состояние батареи: чем меньше остаток, тем тревожнее слово под ней.
   Важность обязательна — общее правило .fl-lab иначе перекрывает цвет. */
.fl-lvl-ok   { fill: #30d158 !important; font-weight: 800; }
.fl-lvl-mid  { fill: #ffd60a !important; font-weight: 800; }
.fl-lvl-warn { fill: #ff9f0a !important; font-weight: 800; }
.fl-lvl-low  { fill: #ff3b30 !important; font-weight: 800; }

/* Инвертер SUN-12K-SG04LP3 */
.fl-case { fill: url(#fl-case); stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.8; }
.fl-seam { stroke: rgba(0, 0, 0, 0.16); stroke-width: 1; fill: none; }
.fl-panel { fill: #1b1d22; }
.fl-screen { fill: #0e3a5c; }
.fl-brand {
    font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em;
    fill: #4aa3e0; text-anchor: middle;
}
.fl-btn { fill: #3d424b; }
.fl-gland { fill: #2b2e34; }
.fl-bracket { fill: #babdc4; }

/* Батарея SE-F16-S: светлый шкаф с круглым дисплеем. Заливка уровня
   приглушена — корпус должен читаться прибором, а не цветным столбиком. */
.fl-batbody { fill: #eef0f4; }
.fl-batedge { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.8; }
.fl-batsheen { stroke: rgba(255, 255, 255, 0.8); stroke-width: 2; fill: none; opacity: 0.5; }
.fl-term { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.2; }
.fl-term-minus { fill: #2b2e34; }
.fl-term-plus  { fill: #d93025; }
.fl-disc { fill: #14161a; stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.8; }
.fl-soc-text {
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    fill: #f4f5f7; letter-spacing: 0.02em;
}

/* Связи: серая подложка всегда, поверх бегущая линия, если поток идёт */
/* Бегущий пунктир. Цвета и штрих теперь в атрибутах самой фигуры, здесь
   осталось только движение — правило висит на одном классе, потому что
   парного fl-line у этой линии больше нет. */
.fl-on { animation: fl-run 1s linear infinite; }
.fl-on.fl-grid   { stroke: #64d2ff; }
.fl-on.fl-load   { stroke: #ff9f43; }
.fl-on.fl-batt   { stroke: #30d158; }
.fl-on.fl-charge { stroke: #ffd60a; }

.fl-arrow.fl-grid   { fill: #64d2ff; }
.fl-arrow.fl-load   { fill: #ff9f43; }
.fl-arrow.fl-batt   { fill: #30d158; }
.fl-arrow.fl-charge { fill: #ffd60a; }

@keyframes fl-run { to { stroke-dashoffset: -16; } }

@media (prefers-reduced-motion: reduce) {
    .fl-line.fl-on { animation: none; }
}