/* ==========================================================================
   Страница Deye — вид карточек.

   Раньше значения выводились абзацами вида «Заряд: 69%»: подпись и число
   одного размера, глазу не за что зацепиться. Здесь то же самое плитками,
   как на сводной странице, — число крупно, подпись мелко и приглушённо.

   Подключается ПОСЛЕ style.css.
   ========================================================================== */

:root { --text-dim: rgba(28, 28, 30, 0.55); }
body[data-theme="dark"], body:not([data-theme="light"]) { --text-dim: rgba(242, 242, 247, 0.55); }
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) { --text-dim: rgba(242, 242, 247, 0.55); }
}

/* --------------------------------------------------------------------------
   Плитки значений
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px;
    margin: 2px 0 10px;
}
.stats-4 { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }

.stat {
    /* Подпись и число в одну строку. Раньше подпись стояла над числом, и
       шесть параметров не помещались в карточку — появлялась вертикальная
       прокрутка. В строку они занимают вдвое меньше высоты. */
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    min-width: 0;
}
body[data-theme="dark"] .stat,
body:not([data-theme="light"]) .stat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.stat-k {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-dim);
    line-height: 1.25;
}
.stat-v {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
.stat-v i {
    font-style: normal;
    font-weight: 600;
    color: var(--text-dim);
}

/* Цветные метки фаз вместо квадратных эмодзи */
.ph { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ph-l1 { background: #ffd60a; }
.ph-l2 { background: #30d158; }
.ph-l3 { background: #ff453a; }

/* --------------------------------------------------------------------------
   Приговор по сети и подвал карточки
   -------------------------------------------------------------------------- */
.grid-verdict {
    font-weight: 650;
    margin-bottom: 8px;
}

.card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 7px;
    margin-top: 2px;
    border-top: 1px solid rgba(128, 128, 128, 0.18);
    color: var(--text-dim);
}
.card-foot > span:last-child { color: var(--text-color); font-weight: 600; text-align: right; }
.card-foot .value-good, .card-foot .value-warning, .card-foot .value-danger { font-weight: 700; }

/* --------------------------------------------------------------------------
   Строки «подпись — значение» для статуса бота: одиннадцать абзацев
   подряд читались как сплошная стена
   -------------------------------------------------------------------------- */
.kv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 12px;
    margin: 0;
}
.kv dt {
    color: var(--text-dim);
    padding: 3px 0;
    min-width: 0;
}
.kv dd {
    margin: 0;
    padding: 4px 0;
    font-weight: 650;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.kv dt + dd { border-bottom: none; }

/* --------------------------------------------------------------------------
   Настройки: разделы и человеческие подписи.

   Полсотни полей подряд читались как стена, а подписью служил сам ключ
   («ADMIN_CHAT_ID»). Сырой ключ остался рядом мелким моноширинным — он
   нужен, когда лезешь в код или в базу, — но глаз цепляется за имя.
   -------------------------------------------------------------------------- */
.set-group { margin-bottom: 26px; }
.set-group-title {
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}
.set-hint {
    color: var(--text-dim);
    margin: -4px 0 14px;
}
.set-row { margin-bottom: 14px; }
.set-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 5px;
    font-weight: 600;
}
.set-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    color: var(--text-dim);
    background: rgba(128, 128, 128, 0.14);
    padding: 1px 7px;
    border-radius: 6px;
}
/* Регистры однотипные — ставим их в два столбца, чтобы не тянуть полотно */
@media (min-width: 900px) {
    .set-group-regs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
    .set-group-regs .set-group-title,
    .set-group-regs .set-hint { grid-column: 1 / -1; }
}

/* Схема потоков: общие правила — в flow.css, он подключён после этого
   файла. Здесь только своё у страницы Deye: контейнер схемы и цвет
   надписей. */
.flow-svg-host { width: 100%; }
.flow-svg-host svg { width: 100%; height: auto; display: block; }

/* Цвет надписей схемы. На сводке переменная объявлена в overview.css,
   которого здесь нет, и заливка уходила в чёрный по умолчанию. */
:root { --text-main: #1c1c1e; }
body[data-theme="dark"] { --text-main: #f2f2f7; }
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) { --text-main: #f2f2f7; }
}

/* Схема должна вписываться в свободную высоту карточки, а не тянуться
   по ширине: карточка стоит в сетке с фиксированной высотой строки и
   режет всё лишнее — снизу отваливался потребитель вместе с подписью.
   Прежний canvas вписывался через object-fit; у SVG ту же работу
   делает viewBox с preserveAspectRatio по умолчанию, надо только дать
   ему обе стороны бокса. */
.flow-card .flow-svg-host {
    /* Именно этот блок — прямой ребёнок карточки, и высоту в общей
       раскладке получает он. В прошлый раз я вписывал внутренний .flow,
       до которого высота не доходила, и схема продолжала тянуться по
       ширине и вылезать за низ карточки. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.flow-card .flow-svg-host .flow {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
}
.flow-card .flow-svg-host svg {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   Шкала кеглей — одна на всю страницу.

   Размеры я поднимал по одному, каждый своим числом, и вышел зоопарк:
   в соседних карточках подписи отличались на полпикселя без всякой
   причины. Здесь пять ступеней и больше ничего; каждый виджет берёт свою.
   -------------------------------------------------------------------------- */
:root {
    --fs-title: 17px;   /* заголовок карточки */
    --fs-value: 23px;   /* крупное число в плитке */
    --fs-num:   15px;   /* число в строке или таблице */
    --fs-text:  14px;   /* обычный текст */
    --fs-label: 12.5px; /* подпись, единица, подвал */
}

.status-card h5, .flow-card h5     { font-size: var(--fs-title); }
.grid-verdict                      { font-size: var(--fs-title); }

.stat-k                            { font-size: var(--fs-label); }
.stat-v                            { font-size: var(--fs-value); }
.stat-v i                          { font-size: var(--fs-label); }

.card-foot                         { font-size: var(--fs-label); }

.kv dt                             { font-size: var(--fs-text); }
.kv dd                             { font-size: var(--fs-num); }

.phase-name, .phase-summary        { font-size: var(--fs-text); }
.phase-val                         { font-size: var(--fs-num); }
.batt-detail-label                 { font-size: var(--fs-text); }
.batt-detail-val                   { font-size: var(--fs-num); }
.usage-days-table                  { font-size: var(--fs-text); }
.usage-days-table td:not(:first-child),
.usage-days-table th:not(:first-child) { font-size: var(--fs-num); }
.battery-mini-label                { font-size: var(--fs-label); }
.battery-mini-val                  { font-size: var(--fs-num); }
.total-item > span                 { font-size: var(--fs-text); }
.yasno-card-mini .update-info      { font-size: var(--fs-label); }
.settings-table, .tou-table        { font-size: var(--fs-text); }
#events-list, .log-container       { font-size: var(--fs-text); }
.nav-tabs .nav-link                { font-size: var(--fs-text) !important; }
.set-label                         { font-size: var(--fs-text); }
.set-group-title                   { font-size: var(--fs-title); }
.set-key, .set-hint, .form-text    { font-size: var(--fs-label); }
.form-control, .form-select        { font-size: var(--fs-text); }
.btn                               { font-size: var(--fs-text); }

/* --------------------------------------------------------------------------
   Вкладка «График»: график слева и пошире, итоги справа.

   Раньше они стояли друг под другом во всю ширину: график занимал экран
   целиком, а таблица с итогами уезжала под сгиб, хотя места по бокам
   хватало обоим.
   -------------------------------------------------------------------------- */
.week-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}
.week-layout #week-stats {
    /* В узком столбце таблица и итоги идут друг под другом, а не рядом */
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 1100px) {
    .week-layout { grid-template-columns: 1fr; }
    .week-layout #week-stats { flex-direction: row; }
}

/* Таблица без обрамления: рамки спорили со стеклом карточки, а строки
   и так разделены. */
#week-table-container .table,
#week-table-container .table th,
#week-table-container .table td {
    border: none;
    background: transparent;
}
#week-table-container .table th {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    padding-bottom: 8px;
}
#week-table-container .table td {
    padding: 5px 8px 5px 0;
    font-variant-numeric: tabular-nums;
}
#week-table-container .table tbody tr + tr td {
    border-top: 1px solid rgba(128, 128, 128, 0.14);
}
#week-summary p { margin: 0 0 7px; }

/* График и таблица должны начинаться на одной высоте: у полотна был
   отступ 6 px, у карточки с итогами — втрое больше, и содержимое
   расходилось по вертикали на глаз. */
.week-layout #canvas-wrapper,
.week-layout #week-stats { padding: 14px 16px; }
#week-table-container .table { margin-bottom: 0; }
#week-table-container .table thead th { padding-top: 0; }