{% extends "base.html" %}
{% from 'partials/frontend_vendor.html' import vendor_chart_js %}

{% block title %}Мониторинг - AWM{% endblock %}

{% block content %}
<div class="card monitoring-page" id="monitoring-root">
    <header class="monitoring-toolbar">
        <div class="monitoring-toolbar__brand">
            <h2 class="monitoring-toolbar__title">Мониторинг</h2>
            <p class="monitoring-toolbar__subtitle">Состояние хостов, метрики и графики</p>
        </div>
        <div class="monitoring-toolbar__bar">
            <div class="monitoring-toolbar__group" role="tablist" aria-label="Режим отображения">
                <span class="monitoring-toolbar__label">Режим</span>
                <div class="monitoring-segment">
                    <button type="button" class="monitoring-segment__btn active" id="monitoring-view-overview" data-view="overview"
                        onclick="monitoringSetViewMode('overview')" title="Сетка всех хостов" aria-selected="true">
                        <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 4h7v7H4V4zm0 9h7v7H4v-7zm9-9h7v7h-7V4zm0 9h7v7h-7v-7z"/></svg>
                        <span>Обзор</span>
                    </button>
                    <button type="button" class="monitoring-segment__btn" id="monitoring-view-host" data-view="host"
                        onclick="monitoringSetViewMode('host')" title="Детали одного хоста" aria-selected="false">
                        <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm2 2v10h12V7H6z"/></svg>
                        <span>Хост</span>
                    </button>
                </div>
            </div>
            <span class="monitoring-toolbar__sep" aria-hidden="true"></span>
            <div class="monitoring-toolbar__group monitoring-toolbar__group--tools" aria-label="Действия с данными">
                <label class="monitoring-auto-refresh" for="monitoring-auto-refresh" title="Периодически запрашивать метрики и обновлять графики на странице">
                    <input type="checkbox" id="monitoring-auto-refresh" checked>
                    <span>Автообновление</span>
                </label>
                <button type="button" class="monitoring-tool-btn" id="monitoring-sidebar-toggle-toolbar"
                    title="Показать или скрыть боковую панель со списком хостов" aria-label="Список хостов" aria-expanded="true">
                    <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>
                    <span class="monitoring-tool-btn__label">Список хостов</span>
                </button>
                <button type="button" class="monitoring-tool-btn" onclick="monitoringRefreshAll()"
                    title="Перезагрузить метрики, статусы хостов и графики с сервера" aria-label="Обновить данные">
                    <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M17.65 6.35A7.96 7.96 0 0 0 12 4V1L7 6l5 5V7c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5H2c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7z"/></svg>
                    <span class="monitoring-tool-btn__label">Обновить</span>
                </button>
                <button type="button" class="monitoring-tool-btn" id="monitoring-fullscreen-btn" onclick="monitoringToggleFullscreen()"
                    title="Развернуть мониторинг на весь экран браузера" aria-label="На весь экран" aria-pressed="false">
                    <svg class="monitoring-toolbar__icon monitoring-icon-expand" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 7h4V5H5v6h2V7zm10 0v2h2V5h-6v2h4zM7 17H5v-6h2v4h4v2zm10 0h-4v-2h6v6h-2v-4z"/></svg>
                    <svg class="monitoring-toolbar__icon monitoring-icon-compress" viewBox="0 0 24 24" aria-hidden="true" hidden><path fill="currentColor" d="M9 9H5V5h4v2zm0 6H5v-4h4v2zm6-6h4v4h-2V9h-2zm0 6h2v2h-4v-2h2z"/></svg>
                    <span class="monitoring-tool-btn__label" data-fullscreen-label>На весь экран</span>
                </button>
                <button type="button" class="monitoring-tool-btn" onclick="monitoringOpenWallWindow()"
                    title="Открыть мониторинг в отдельном окне (видеостена / внешний дисплей)" aria-label="Открыть в отдельном окне">
                    <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L10 12.59 11.41 14 19 6.41V10h2V3h-7z"/></svg>
                    <span class="monitoring-tool-btn__label">Отдельное окно</span>
                </button>
            </div>
            {% if can_notifications_monitoring or can_settings_monitoring %}
            <span class="monitoring-toolbar__sep" aria-hidden="true"></span>
            <nav class="monitoring-toolbar__nav" aria-label="Разделы мониторинга">
                {% if can_notifications_monitoring %}
                <a class="monitoring-toolbar__link" href="/monitoring/notifications">Оповещения</a>
                {% endif %}
                {% if can_settings_monitoring %}
                <a class="monitoring-toolbar__link" href="/monitoring/library">Библиотека</a>
                <a class="monitoring-toolbar__link" href="/monitoring/releases">Релизы</a>
                <a class="monitoring-toolbar__link" href="/monitoring/settings">Настройки</a>
                {% endif %}
            </nav>
            {% endif %}
            {% if can_add_hosts %}
            <button type="button" class="monitoring-toolbar__cta" onclick="monitoringOpenCreateModal()">
                <svg class="monitoring-toolbar__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                <span>Хост</span>
            </button>
            {% endif %}
        </div>
    </header>

    <div class="monitoring-layout" id="monitoring-layout">
        <div class="monitoring-sidebar-wrap" id="monitoring-sidebar-wrap">
            <aside class="monitoring-sidebar card" id="monitoring-sidebar" aria-label="Список хостов">
                <div class="monitoring-sidebar-head">
                    <div class="monitoring-sidebar-top">
                        <div class="monitoring-sidebar-top__title">
                            <h3 class="monitoring-sidebar-title">Хосты</h3>
                            <span id="monitoring-hosts-count" class="monitoring-hosts-count" title="Всего хостов">—</span>
                        </div>
                        <button type="button" class="monitoring-sidebar-collapse" id="monitoring-sidebar-collapse"
                            title="Свернуть боковую панель со списком хостов" aria-label="Свернуть список хостов" aria-expanded="true">
                            <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                            <span class="monitoring-sidebar-collapse__label">Свернуть</span>
                        </button>
                    </div>
                    <div id="monitoring-hosts-summary" class="monitoring-hosts-summary" aria-live="polite"></div>
                    <label class="monitoring-sidebar-search" for="monitoring-host-search">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                        <input type="search" id="monitoring-host-search" placeholder="Поиск по имени…" autocomplete="off">
                    </label>
                    <details class="monitoring-sidebar-panel" open>
                        <summary class="monitoring-sidebar-panel__summary">Фильтр и порядок</summary>
                        <p class="monitoring-sidebar-hint">Перетащите ⋮⋮ для сортировки</p>
                        <div class="monitoring-segment monitoring-segment--compact monitoring-status-filters" id="monitoring-status-filters" role="group" aria-label="Фильтр по статусу">
                            <button type="button" class="monitoring-segment__btn active" data-status-filter="all">Все</button>
                            <button type="button" class="monitoring-segment__btn" data-status-filter="online">Онлайн</button>
                            <button type="button" class="monitoring-segment__btn" data-status-filter="offline">Офлайн</button>
                            <button type="button" class="monitoring-segment__btn" data-status-filter="pending">Ожид.</button>
                        </div>
                    </details>
                </div>
                <div id="monitoring-agents-list" class="monitoring-agents-list">
                    <div class="monitoring-list-placeholder loading">Загрузка…</div>
                </div>
            </aside>
            <button type="button" class="monitoring-sidebar-rail" id="monitoring-sidebar-expand"
                title="Показать список хостов" aria-label="Показать список хостов">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                <span class="monitoring-sidebar-rail__label">Хосты</span>
            </button>
        </div>
        <main class="monitoring-main card">
            <div id="monitoring-overview-panel" class="monitoring-overview-panel" hidden>
                <div class="monitoring-section-head">
                    <div>
                        <h4 class="monitoring-section-title">Обзор хостов</h4>
                        <span class="monitoring-section-hint">Клик по карточке — детали хоста · период графиков общий</span>
                    </div>
                    <div id="monitoring-overview-period"></div>
                </div>
                <div id="monitoring-overview-grid" class="monitoring-overview-grid">
                    <div class="monitoring-list-placeholder loading">Загрузка…</div>
                </div>
            </div>
            <div id="monitoring-agent-detail" class="monitoring-agent-detail">
                <div class="monitoring-empty-state">
                    <div class="monitoring-empty-icon" aria-hidden="true">📡</div>
                    <h3 class="monitoring-empty-title">Выберите хост</h3>
                    <p class="monitoring-empty-text">Режим «Обзор» — все хосты сразу. Режим «Хост» — метрики и графики выбранного сервера.</p>
                </div>
            </div>
        </main>
    </div>
</div>

{% if can_add_hosts %}
<div id="monitoring-create-modal" class="modal" style="z-index:10000;">
    <div class="modal-content" style="max-width:640px;padding:16px;">
        <div class="modal-header" style="margin-bottom:16px;padding-bottom:12px;">
            <h3 style="margin:0;">Новый хост</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseCreateModal()" aria-label="Закрыть">&times;</button>
        </div>
        <div id="monitoring-create-form">
        <div class="form-group">
            <label for="monitoring-create-kind">Режим</label>
            <select id="monitoring-create-kind" class="form-control" onchange="monitoringOnCreateKindChange()">
                <option value="installed">Агент AWM (установка на сервер)</option>
                <option value="synthetic">Проверяемый хост (ping/HTTP с AWM)</option>
            </select>
        </div>
        <div class="form-group">
            <label for="monitoring-create-name">Имя</label>
            <input id="monitoring-create-name" class="form-control" type="text" placeholder="web-01">
        </div>
        <div class="form-group" id="monitoring-create-target-wrap" style="display:none;">
            <label for="monitoring-create-target">IP или домен</label>
            <input id="monitoring-create-target" class="form-control" type="text" placeholder="192.168.1.10 или example.com">
        </div>
        <div class="form-group">
            <label for="monitoring-create-scope">Доступ</label>
            <select id="monitoring-create-scope" class="form-control" onchange="monitoringOnScopeChange()">
                <option value="personal">Личный</option>
                <option value="group">Командный (группа)</option>
            </select>
        </div>
        <div class="form-group" id="monitoring-create-group-wrap" style="display:none;">
            <label for="monitoring-create-group">Группа</label>
            <select id="monitoring-create-group" class="form-control"></select>
        </div>
        </div>
        <div id="monitoring-create-actions" style="margin-top:12px;display:flex;gap:8px;">
            <button id="monitoring-create-submit" class="btn btn-primary" type="button" onclick="monitoringCreateAgent()">Создать</button>
            <button id="monitoring-create-cancel" class="btn btn-secondary" type="button" onclick="monitoringCloseCreateModal()">Отмена</button>
        </div>
        <div id="monitoring-create-result" style="display:none;margin-top:14px;"></div>
    </div>
</div>
{% endif %}
{% if can_add_hosts or can_manage_monitoring %}
<div id="monitoring-install-bundle-modal" class="modal">
    <div class="modal-content" style="max-width: 640px;">
        <div class="modal-header">
            <h3>Пакет установки агента</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseInstallBundleModal()" aria-label="Закрыть">&times;</button>
        </div>
        <p style="font-size:13px;color:var(--gray-600);margin:0 0 12px;">
            При переустановке или обновлении агента перевыпустите токен и скачайте новый архив с актуальным <code>config.yaml</code>.
            Предыдущий токен перестанет работать.
        </p>
        <div id="monitoring-install-bundle-body">
            <button type="button" class="btn btn-primary" id="monitoring-install-bundle-regen" onclick="monitoringRegenerateInstallBundle()">
                Перевыпустить токен и показать ссылки
            </button>
        </div>
        <div style="display:flex;justify-content:flex-end;margin-top:16px;">
            <button type="button" class="btn btn-secondary" onclick="monitoringCloseInstallBundleModal()">Закрыть</button>
        </div>
    </div>
</div>
{% endif %}
<div id="monitoring-identity-modal" class="modal">
    <div class="modal-content" style="max-width: 560px;">
        <div class="modal-header">
            <h3>Данные хоста изменились</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseIdentityModal()" aria-label="Закрыть">&times;</button>
        </div>
        <p style="font-size:13px;color:var(--gray-600);margin:0 0 12px;">
            Агент сообщил значения, отличные от записанных в мониторинге (например после переустановки).
            Обновить карточку хоста или оставить текущие данные?
        </p>
        <div id="monitoring-identity-changes"></div>
        <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px;">
            <button type="button" class="btn btn-secondary" onclick="monitoringDismissIdentityChange()">Оставить как есть</button>
            <button type="button" class="btn btn-primary" onclick="monitoringApplyIdentityChange()">Перезаписать данные</button>
        </div>
    </div>
</div>
<div id="monitoring-scripts-modal" class="modal">
    <div class="modal-content" style="max-width: 720px;">
        <div class="modal-header">
            <h3>Пользовательские скрипты</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseScriptsModal()">&times;</button>
        </div>
        <p style="font-size:13px;color:var(--gray-600);margin:0 0 14px;">
            Файлы в <code>agent-scp/</code> на хосте (Linux <code>/opt/awm-agent/agent-scp</code>,
            macOS <code>/usr/local/awm-agent/agent-scp</code>,
            Windows <code>C:\awm-agent/agent-scp</code> или ваш каталог установки) синхронизируются агентом раз в час.
            Linux и macOS: <code>.sh</code>; Windows: <code>.ps1</code> (PowerShell). Из библиотеки команда подставляется автоматически.
            Статус доставки из библиотеки показывается только пока файл в пути или при ошибке.
            Обмен с сервером шифруется ключом из пакета установки.
        </p>
        <div id="monitoring-scripts-list" style="margin-bottom:16px;"></div>
        <h4 style="margin:0 0 10px;font-size:15px;">Добавить скрипт</h4>
        <form id="monitoring-script-form" onsubmit="event.preventDefault(); monitoringSubmitScript();">
            <div class="form-row">
                <div class="form-group">
                    <label for="monitoring-script-name">Техническое имя *</label>
                    <input type="text" id="monitoring-script-name" class="form-control" required placeholder="pkg" pattern="[A-Za-z0-9_./-]+" title="Латиница, цифры, _ . / -">
                    <small class="form-hint">Ключ метрики: custom.&lt;имя&gt; (для агента, не меняйте без необходимости)</small>
                </div>
                <div class="form-group">
                    <label for="monitoring-script-title">Название</label>
                    <input type="text" id="monitoring-script-title" class="form-control" placeholder="Число пакетов">
                    <small class="form-hint">Как показывать в карточках и на графиках</small>
                </div>
            </div>
            <div class="form-group">
                <label for="monitoring-script-output-type">Тип вывода</label>
                <select id="monitoring-script-output-type" class="form-control">
                    <option value="number" selected>Число</option>
                    <option value="text">Текст</option>
                    <option value="json">JSON</option>
                    <option value="file_hash">Хеш файла (SHA-256)</option>
                </select>
                <small class="form-hint" id="monitoring-script-output-hint">Для числа — одна строка с числом в выводе команды</small>
            </div>
            <div class="form-group">
                <label for="monitoring-script-command" id="monitoring-script-command-label">Команда *</label>
                <input type="text" id="monitoring-script-command" class="form-control" required placeholder="Linux: /opt/awm-agent/agent-scp/check.sh  |  Windows: powershell -File C:\awm-agent\agent-scp\check.ps1">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="monitoring-script-interval">Интервал (сек)</label>
                    <input type="number" id="monitoring-script-interval" class="form-control" min="30" value="300">
                </div>
                <div class="form-group">
                    <label for="monitoring-script-timeout">Таймаут (сек)</label>
                    <input type="number" id="monitoring-script-timeout" class="form-control" min="5" value="30">
                </div>
            </div>
            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;">
                    <input type="checkbox" id="monitoring-script-track-change">
                    Отслеживать изменения (стрелки ↑/↓ на плитке)
                </label>
                <small class="form-hint">Для хеша файла включается автоматически. Триггеры: «увеличилось», «уменьшилось», «изменилось»</small>
            </div>
            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;">
                    <input type="checkbox" id="monitoring-script-enabled" checked>
                    Включён
                </label>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px;">
                <button type="button" class="btn btn-secondary" onclick="monitoringCloseScriptsModal()">Закрыть</button>
                <button type="submit" class="btn btn-primary">Добавить скрипт</button>
            </div>
        </form>
    </div>
</div>

<div id="monitoring-script-edit-modal" class="modal">
    <div class="modal-content" style="max-width: 520px;">
        <div class="modal-header">
            <h3>Параметры скрипта</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseScriptEditModal()">&times;</button>
        </div>
        <p id="monitoring-script-edit-meta" class="form-hint" style="margin:0 0 14px;"></p>
        <form id="monitoring-script-edit-form" onsubmit="event.preventDefault(); monitoringSaveScriptEdit();">
            <input type="hidden" id="monitoring-script-edit-id" value="">
            <div class="form-group">
                <label for="monitoring-script-edit-title">Название</label>
                <input type="text" id="monitoring-script-edit-title" class="form-control" placeholder="Число пакетов APT">
                <small class="form-hint">Как показывать в карточках и на графиках</small>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="monitoring-script-edit-interval">Интервал опроса (сек) *</label>
                    <input type="number" id="monitoring-script-edit-interval" class="form-control" min="30" max="86400" required value="300">
                    <small class="form-hint">Как часто агент запускает скрипт. Меньше значение — меньше «пропусков» на графике</small>
                </div>
                <div class="form-group">
                    <label for="monitoring-script-edit-timeout">Таймаут (сек) *</label>
                    <input type="number" id="monitoring-script-edit-timeout" class="form-control" min="5" max="3600" required value="30">
                    <small class="form-hint">Максимальное время выполнения одной команды</small>
                </div>
            </div>
            <div class="form-group" style="margin-top:10px;">
                <label style="display:flex;align-items:center;gap:8px;">
                    <input type="checkbox" id="monitoring-script-edit-track-change">
                    Отслеживать изменения (↑/↓ на плитке)
                </label>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px;">
                <button type="button" class="btn btn-secondary" onclick="monitoringCloseScriptEditModal()">Отмена</button>
                <button type="submit" class="btn btn-primary">Сохранить</button>
            </div>
        </form>
    </div>
</div>

<div id="monitoring-probes-modal" class="modal">
    <div class="modal-content" style="max-width: 760px;">
        <div class="modal-header">
            <h3>Проверки (ping / HTTP)</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseProbesModal()">&times;</button>
        </div>
        <p style="font-size:13px;color:var(--gray-600);margin:0 0 14px;">
            ICMP/TCP или HTTP(S) с правилами и извлечением метрик. Метрики <code>probe.*</code> доступны на графиках и в триггерах.
            Для agentless-хоста проверки выполняются с сервера AWM; для агента можно выбрать vantage «с агента».
        </p>
        <div id="monitoring-probes-list" style="margin-bottom:16px;"></div>
        <h4 style="margin:0 0 10px;font-size:15px;">Добавить проверку</h4>
        <form id="monitoring-probe-form" onsubmit="event.preventDefault(); monitoringSubmitProbe();">
            <div class="form-row">
                <div class="form-group">
                    <label for="monitoring-probe-name">Имя *</label>
                    <input type="text" id="monitoring-probe-name" class="form-control" required placeholder="api_health">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-type">Тип</label>
                    <select id="monitoring-probe-type" class="form-control" onchange="monitoringOnProbeTypeChange()">
                        <option value="icmp">Ping (ICMP / TCP)</option>
                        <option value="http">HTTP / API</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group" id="monitoring-probe-vantage-wrap">
                    <label for="monitoring-probe-vantage">Откуда выполнять</label>
                    <select id="monitoring-probe-vantage" class="form-control">
                        <option value="control_plane">С сервера AWM</option>
                        <option value="agent">С агента на хосте</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-interval">Интервал (сек, мин. 5)</label>
                    <input type="number" id="monitoring-probe-interval" class="form-control" min="5" value="60">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-timeout">Таймаут (сек)</label>
                    <input type="number" id="monitoring-probe-timeout" class="form-control" min="1" max="120" value="10">
                </div>
            </div>
            <div id="monitoring-probe-icmp-fields">
                <div class="form-row">
                    <div class="form-group">
                        <label for="monitoring-probe-target">Цель (IP/домен) *</label>
                        <input type="text" id="monitoring-probe-target" class="form-control" placeholder="example.com">
                    </div>
                    <div class="form-group">
                        <label for="monitoring-probe-tcp-port">TCP fallback порт</label>
                        <input type="number" id="monitoring-probe-tcp-port" class="form-control" min="1" max="65535" value="443">
                    </div>
                </div>
            </div>
            <div id="monitoring-probe-http-fields" style="display:none;">
                <div class="form-group">
                    <label for="monitoring-probe-url">URL *</label>
                    <input type="text" id="monitoring-probe-url" class="form-control" placeholder="https://example.com/health">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="monitoring-probe-method">Метод</label>
                        <select id="monitoring-probe-method" class="form-control">
                            <option>GET</option>
                            <option>POST</option>
                            <option>HEAD</option>
                            <option>PUT</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="monitoring-probe-auth">Аутентификация</label>
                        <select id="monitoring-probe-auth" class="form-control">
                            <option value="none">Нет</option>
                            <option value="bearer">Bearer</option>
                            <option value="basic">Basic</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-auth-token">Token / пароль</label>
                    <input type="text" id="monitoring-probe-auth-token" class="form-control" placeholder="для bearer или basic password">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-auth-user">Имя пользователя (Basic)</label>
                    <input type="text" id="monitoring-probe-auth-user" class="form-control">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-assert-status">Ожидаемые HTTP-коды (через запятую)</label>
                    <input type="text" id="monitoring-probe-assert-status" class="form-control" placeholder="200,204">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-assert-body">Тело содержит</label>
                    <input type="text" id="monitoring-probe-assert-body" class="form-control" placeholder="ok">
                </div>
                <div class="form-group">
                    <label for="monitoring-probe-extract">Extractors JSON (опционально)</label>
                    <textarea id="monitoring-probe-extract" class="form-control" rows="3" placeholder='[{"name":"latency","kind":"json_path","path":"data.latency_ms"}]'></textarea>
                </div>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px;">
                <button type="button" class="btn btn-secondary" onclick="monitoringCloseProbesModal()">Закрыть</button>
                <button type="submit" class="btn btn-primary">Добавить проверку</button>
            </div>
        </form>
    </div>
</div>

<div id="monitoring-pdf-modal" class="modal">
    <div class="modal-content monitoring-pdf-modal-content">
        <div class="modal-header">
            <h3>Экспорт PDF</h3>
            <button type="button" class="close-btn" id="monitoring-pdf-modal-close" aria-label="Закрыть">&times;</button>
        </div>
        <p class="monitoring-pdf-modal-desc">Настройте период и разделы отчёта. Формирование может выполняться в фоне при настроенной очереди задач.</p>
        <p id="monitoring-pdf-backend-hint" class="monitoring-pdf-backend-hint" aria-live="polite"></p>
        <div id="monitoring-pdf-period-wrap" class="monitoring-pdf-period-wrap"></div>
        <fieldset class="monitoring-pdf-fieldset">
            <legend>Разделы отчёта</legend>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-stats" checked> Статистика метрик</label>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-charts" checked> Графики за период</label>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-formulas" checked> Формулы</label>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-triggers" checked> Триггеры</label>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-scripts" checked> Скрипты</label>
            <label class="monitoring-pdf-check"><input type="checkbox" id="monitoring-pdf-opt-thresholds" checked> Пороги warn/crit</label>
        </fieldset>
        <fieldset class="monitoring-pdf-fieldset" id="monitoring-pdf-charts-fieldset">
            <legend>Графики (если включены)</legend>
            <label class="monitoring-pdf-check" title="Средняя загрузка процессора по всем ядрам, в процентах."><input type="checkbox" class="monitoring-pdf-chart-key" value="cpu.usage_percent" checked> Загрузка CPU</label>
            <label class="monitoring-pdf-check" title="Доля занятой оперативной памяти (RAM), в процентах."><input type="checkbox" class="monitoring-pdf-chart-key" value="mem.usage_percent" checked> Использование RAM</label>
            <label class="monitoring-pdf-check" title="Процент занятого места на корневом разделе (/)."><input type="checkbox" class="monitoring-pdf-chart-key" value="disk.usage_percent" checked> Заполненность диска /</label>
            <label class="monitoring-pdf-check" title="Load average за 1 минуту. Норма — не выше числа ядер."><input type="checkbox" class="monitoring-pdf-chart-key" value="cpu.load1" checked> Средняя нагрузка · 1 мин</label>
        </fieldset>
        <div id="monitoring-pdf-progress" class="monitoring-pdf-progress" hidden>
            <div class="monitoring-pdf-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <span id="monitoring-pdf-progress-fill" style="width:0%"></span>
            </div>
            <p id="monitoring-pdf-progress-text" class="monitoring-pdf-progress-text">Подготовка…</p>
        </div>
        <div class="monitoring-pdf-modal-actions">
            <button type="button" class="btn btn-secondary" id="monitoring-pdf-cancel-btn">Отмена</button>
            <button type="button" class="btn btn-primary" id="monitoring-pdf-start-btn">Сформировать PDF</button>
        </div>
    </div>
</div>

<div id="monitoring-chart-modal" class="modal">
    <div class="modal-content monitoring-chart-modal-content">
        <div class="modal-header">
            <h3 id="monitoring-chart-modal-title">Метрика</h3>
            <button type="button" class="close-btn" onclick="monitoringCloseChartModal()" aria-label="Закрыть">&times;</button>
        </div>
        <p id="monitoring-chart-modal-desc" class="monitoring-chart-modal-desc"></p>
        <div id="monitoring-chart-modal-meta" class="monitoring-chart-modal-meta"></div>
        <div id="monitoring-chart-modal-period-wrap" class="monitoring-chart-modal-period-wrap"></div>
        <h4 class="monitoring-chart-stats-heading" id="monitoring-chart-modal-stats-title">Сводка за период</h4>
        <div id="monitoring-chart-modal-stats" class="monitoring-chart-modal-stats"></div>
        <div class="monitoring-chart-modal-canvas-wrap">
            <canvas id="monitoring-chart-modal-canvas"></canvas>
        </div>
        <div style="display:flex;justify-content:flex-end;margin-top:14px;">
            <button type="button" class="btn btn-secondary" onclick="monitoringCloseChartModal()">Закрыть</button>
        </div>
    </div>
</div>

<div id="monitoring-chart-period-modal" class="modal monitoring-chart-period-modal">
    <div class="modal-content" style="max-width: 480px;">
        <div class="modal-header">
            <h3>Период графиков</h3>
            <button type="button" class="close-btn" id="monitoring-chart-period-close" aria-label="Закрыть">&times;</button>
        </div>
        <p class="form-hint" style="margin:0 0 16px;">
            Выберите интервал для графиков обзора и карточки хоста. Режим «Последние» — скользящее окно от текущего момента; «История» — фиксированные даты ОТ и ДО.
        </p>
        <div class="monitoring-chart-period-modes" role="group" aria-label="Режим периода">
            <button type="button" class="btn btn-secondary btn-sm monitoring-chart-period" data-period-modal-mode="rolling" id="monitoring-period-mode-rolling">Последние</button>
            <button type="button" class="btn btn-secondary btn-sm monitoring-chart-period" data-period-modal-mode="history" id="monitoring-period-mode-history">История</button>
        </div>
        <div id="monitoring-period-rolling-fields" class="monitoring-chart-period-fields">
            <div class="form-group">
                <label for="monitoring-period-amount">Длительность <span style="color:var(--danger)">*</span></label>
                <div class="monitoring-chart-period-rolling-row">
                    <input type="number" id="monitoring-period-amount" class="form-control" min="1" step="1" title="Длительность (минимум 5 секунд)">
                    <select id="monitoring-period-unit" class="form-control" title="Единица">
                        <option value="s">сек</option>
                        <option value="m">мин</option>
                        <option value="h">ч</option>
                        <option value="d">сут</option>
                    </select>
                </div>
                <p class="form-hint">Скользящее окно: графики всегда показывают последние N единиц времени.</p>
            </div>
        </div>
        <div id="monitoring-period-history-fields" class="monitoring-chart-period-fields" hidden>
            <div class="form-group">
                <label for="monitoring-period-from">ОТ <span style="color:var(--danger)">*</span></label>
                <input type="datetime-local" id="monitoring-period-from" class="form-control" step="1">
            </div>
            <div class="form-group">
                <label for="monitoring-period-to">ДО <span style="color:var(--danger)">*</span></label>
                <input type="datetime-local" id="monitoring-period-to" class="form-control" step="1">
            </div>
            <p class="form-hint">Фиксированный интервал для разбора инцидентов; автообновление графиков в этом режиме отключено.</p>
        </div>
        <div class="monitoring-chart-period-modal-actions">
            <button type="button" class="btn btn-secondary" id="monitoring-chart-period-cancel">Отмена</button>
            <button type="button" class="btn btn-primary" id="monitoring-chart-period-apply">Применить</button>
        </div>
    </div>
</div>

<style>
    .monitoring-page {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .monitoring-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px 20px;
        margin-bottom: 18px;
        padding: 0 0 16px;
        background: transparent;
        color: inherit;
        border-bottom: 1px solid var(--border);
        box-shadow: none;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .monitoring-toolbar__brand {
        min-width: 0;
        flex: 1 1 200px;
    }
    .monitoring-toolbar__title {
        margin: 0 0 4px;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gray-900);
        line-height: 1.2;
    }
    .monitoring-toolbar__subtitle {
        margin: 0;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.35;
        max-width: 36rem;
    }
    .monitoring-toolbar__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        flex: 2 1 420px;
        justify-content: flex-end;
    }
    .monitoring-toolbar__group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .monitoring-toolbar__group--tools {
        gap: 4px;
        padding: 3px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .monitoring-auto-refresh {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 4px 0 0;
        padding: 5px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .monitoring-auto-refresh input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
        cursor: pointer;
    }
    .monitoring-auto-refresh.is-disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }
    .monitoring-auto-refresh.is-disabled input {
        cursor: not-allowed;
    }
    .monitoring-toolbar__label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-500);
        white-space: nowrap;
    }
    .monitoring-toolbar__sep {
        width: 1px;
        height: 28px;
        background: var(--border);
        flex-shrink: 0;
    }
    .monitoring-toolbar__icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        display: block;
    }
    .monitoring-segment {
        display: inline-flex;
        padding: 3px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        gap: 2px;
    }
    .monitoring-segment__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--gray-600);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        line-height: 1;
    }
    .monitoring-segment__btn:hover {
        color: var(--gray-900);
        background: color-mix(in srgb, var(--surface) 70%, transparent);
    }
    .monitoring-segment__btn.active {
        background: var(--surface);
        color: var(--primary);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }
    .monitoring-segment__btn.active .monitoring-toolbar__icon {
        color: var(--primary);
    }
    .monitoring-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--gray-600);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .monitoring-tool-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 36px;
        padding: 6px 10px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--gray-700);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        white-space: nowrap;
    }
    .monitoring-tool-btn__label {
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .monitoring-tool-btn:hover {
        background: var(--surface);
        color: var(--gray-900);
    }
    .monitoring-tool-btn.is-active {
        background: color-mix(in srgb, var(--primary) 14%, var(--surface));
        color: var(--primary);
    }
    .monitoring-tool-btn.is-active .monitoring-toolbar__icon {
        color: var(--primary);
    }
    .monitoring-icon-btn:hover {
        background: var(--surface);
        color: var(--gray-900);
    }
    .monitoring-icon-btn.is-active {
        background: color-mix(in srgb, var(--primary) 14%, var(--surface));
        color: var(--primary);
    }
    .monitoring-icon-btn[hidden] {
        display: none !important;
    }
    @media (max-width: 1180px) {
        .monitoring-tool-btn__label {
            display: none;
        }
        .monitoring-tool-btn {
            width: 36px;
            padding: 0;
        }
    }
    .monitoring-toolbar__nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
    }
    .monitoring-toolbar__link {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .monitoring-toolbar__link:hover {
        background: var(--bg-secondary);
        color: var(--primary);
        text-decoration: none;
    }
    .monitoring-toolbar__cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border: none;
        border-radius: 9px;
        background: var(--primary);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
        transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    }
    .monitoring-toolbar__cta:hover {
        background: var(--primary-dark, var(--primary));
        box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
    }
    .monitoring-toolbar__cta:active {
        transform: scale(0.98);
    }
    @media (max-width: 720px) {
        .monitoring-toolbar__bar {
            justify-content: flex-start;
        }
        .monitoring-toolbar__label {
            display: none;
        }
        .monitoring-toolbar__sep {
            display: none;
        }
        .monitoring-segment__btn span {
            display: none;
        }
        .monitoring-segment__btn {
            padding: 8px 10px;
        }
        .monitoring-toolbar__cta span {
            display: none;
        }
        .monitoring-toolbar__cta {
            padding: 9px 11px;
        }
    }
    .monitoring-sidebar-hint {
        margin: 0 0 6px;
        font-size: 11px;
        color: var(--gray-500);
        line-height: 1.3;
    }
    .monitoring-status-filters .monitoring-segment__btn.active {
        background: var(--surface);
        color: var(--primary);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
    }
    .monitoring-agent-btn.drag-over {
        outline: 2px dashed var(--primary);
        outline-offset: 2px;
    }
    .monitoring-agent-drag {
        cursor: grab;
        color: var(--gray-500);
        font-size: 12px;
        line-height: 1;
        padding: 2px 4px 0 0;
        flex-shrink: 0;
        user-select: none;
    }
    .monitoring-agent-btn.dragging {
        opacity: 0.45;
    }
    .monitoring-overview-panel {
        margin-bottom: 16px;
    }
    .monitoring-overview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
    }
    .monitoring-overview-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        background: var(--surface);
        cursor: pointer;
        text-align: left;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .monitoring-overview-card:hover {
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    }
    .monitoring-overview-card.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
    }
    .monitoring-overview-card.monitoring-agent-btn--online {
        border-left: 3px solid var(--success);
    }
    .monitoring-overview-card.monitoring-agent-btn--offline {
        border-left: 3px solid var(--danger);
    }
    .monitoring-overview-card.monitoring-agent-btn--pending {
        border-left: 3px solid var(--warning);
    }
    .monitoring-overview-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }
    .monitoring-overview-card-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }
    .monitoring-overview-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 10px;
        font-size: 11px;
        color: var(--gray-500);
        line-height: 1.3;
    }
    .monitoring-overview-card-sub {
        font-weight: 600;
        color: var(--gray-600);
    }
    .monitoring-overview-card-seen {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .monitoring-overview-health {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 999px;
        width: fit-content;
    }
    .monitoring-overview-health-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .monitoring-overview-health--ok {
        color: var(--success);
        background: color-mix(in srgb, var(--success) 12%, transparent);
    }
    .monitoring-overview-health--ok .monitoring-overview-health-dot { background: var(--success); }
    .monitoring-overview-health--warn {
        color: var(--warning);
        background: color-mix(in srgb, var(--warning) 14%, transparent);
    }
    .monitoring-overview-health--warn .monitoring-overview-health-dot { background: var(--warning); }
    .monitoring-overview-health--danger {
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 14%, transparent);
    }
    .monitoring-overview-health--danger .monitoring-overview-health-dot { background: var(--danger); }
    .monitoring-overview-metrics {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 2px;
    }
    .monitoring-metric-label-block {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .monitoring-metric-label-block__title {
        font-weight: 700;
        color: var(--gray-700);
        line-height: 1.2;
    }
    .monitoring-metric-desc {
        font-size: 10px;
        font-weight: 500;
        color: var(--gray-500);
        line-height: 1.25;
    }
    .monitoring-stat-card .monitoring-metric-label-block__title {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--gray-600);
    }
    .monitoring-tile .monitoring-metric-label-block__title {
        font-size: 12px;
    }
    .monitoring-overview-metric-row {
        display: grid;
        grid-template-columns: minmax(100px, 1.1fr) minmax(0, 2fr) minmax(3.5rem, auto);
        gap: 8px;
        align-items: center;
        font-size: 12px;
        padding: 2px 0;
        border-radius: 6px;
        transition: background 0.12s ease;
    }
    .monitoring-overview-metric-label-col .monitoring-metric-label-block__title {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .monitoring-overview-metric-label-col .monitoring-metric-desc {
        font-size: 9px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .monitoring-overview-metric-row:hover {
        background: color-mix(in srgb, var(--primary) 6%, transparent);
    }
    .monitoring-overview-metric-row[data-level="warn"] {
        border-left: 2px solid var(--warning);
        padding-left: 6px;
        margin-left: -2px;
    }
    .monitoring-overview-metric-row[data-level="danger"] {
        border-left: 2px solid var(--danger);
        padding-left: 6px;
        margin-left: -2px;
    }
    .monitoring-overview-metric-bar-wrap {
        min-width: 0;
    }
    .monitoring-overview-metric-bar-wrap .monitoring-tile-bar {
        margin-top: 0;
        height: 10px;
        background: color-mix(in srgb, var(--border) 70%, var(--surface));
        border: 1px solid var(--border);
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
    }
    .monitoring-overview-metric-bar-wrap .monitoring-tile-bar > span {
        transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 2px;
    }
    .monitoring-overview-metric-bar-wrap .monitoring-tile-bar--empty > span {
        min-width: 0;
    }
    .monitoring-overview-metric-row[data-level="danger"] .monitoring-tile-bar > span {
        animation: monitoring-overview-pulse 2s ease-in-out infinite;
    }
    @keyframes monitoring-overview-pulse {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.15); }
    }
    .monitoring-overview-metric-value {
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--gray-800);
        min-width: 3.5rem;
        text-align: right;
        font-size: 12px;
    }
    .monitoring-overview-metric-value--ok { color: var(--success); }
    .monitoring-overview-metric-value--warn { color: var(--warning); }
    .monitoring-overview-metric-value--danger { color: var(--danger); }
    .monitoring-overview-metric-row--empty .monitoring-overview-metric-value {
        color: var(--gray-500);
        font-weight: 600;
    }
    .monitoring-main--overview-only .monitoring-agent-detail {
        display: none;
    }
    .monitoring-main--host-only .monitoring-overview-panel {
        display: none !important;
    }
    .monitoring-page.monitoring-page--fullscreen {
        position: fixed;
        inset: 0;
        z-index: 10050;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        overflow: auto;
        width: 100vw;
        max-width: none;
    }
    .monitoring-page.monitoring-page--fullscreen .monitoring-sidebar {
        max-height: calc(100vh - 140px);
    }
    body.monitoring-standalone-mode > header,
    body.monitoring-standalone-mode #sidebar-nav,
    body.monitoring-standalone-mode #live-notifications-stack {
        display: none !important;
    }
    body.monitoring-standalone-mode .app-shell {
        display: block;
    }
    body.monitoring-standalone-mode .content-area {
        width: 100%;
        max-width: none;
    }
    body.monitoring-standalone-mode .container {
        max-width: none;
    }
    .monitoring-layout {
        margin-top: 4px;
        display: grid;
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        transition: grid-template-columns 0.22s ease;
    }
    .monitoring-layout.monitoring-layout--sidebar-collapsed {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
    }
    @media (max-width: 960px) {
        .monitoring-layout:not(.monitoring-layout--sidebar-collapsed) {
            grid-template-columns: 1fr;
        }
        .monitoring-layout.monitoring-layout--sidebar-collapsed {
            grid-template-columns: 44px minmax(0, 1fr);
        }
        .monitoring-sidebar-wrap {
            order: 2;
        }
        .monitoring-main {
            order: 1;
        }
    }
    .monitoring-sidebar-wrap {
        position: relative;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .monitoring-sidebar {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 200px);
        position: sticky;
        top: 12px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .monitoring-layout--sidebar-collapsed .monitoring-sidebar {
        display: none !important;
    }
    .monitoring-sidebar-rail {
        display: none;
        position: sticky;
        top: 12px;
        left: 0;
        z-index: 6;
        flex-shrink: 0;
        align-self: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 40px;
        padding: 10px 6px;
        border: 1px solid var(--border);
        border-left: none;
        border-radius: 0 10px 10px 0;
        background: var(--surface);
        color: var(--gray-700);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: background 0.15s ease, color 0.15s ease;
    }
    .monitoring-layout--sidebar-collapsed .monitoring-sidebar-rail {
        display: inline-flex;
    }
    .monitoring-sidebar-rail:hover {
        background: var(--bg-secondary);
        color: var(--primary);
    }
    .monitoring-sidebar-rail svg {
        width: 20px;
        height: 20px;
    }
    .monitoring-sidebar-rail__label {
        font-size: 10px;
        font-weight: 700;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: 0.04em;
    }
    .monitoring-sidebar-head {
        padding: 12px 12px 10px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg-secondary) 85%, var(--surface));
    }
    .monitoring-sidebar-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }
    .monitoring-sidebar-top__title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .monitoring-sidebar-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gray-900);
    }
    .monitoring-hosts-count {
        font-size: 11px;
        font-weight: 700;
        color: var(--gray-600);
        background: var(--surface);
        border: 1px solid var(--border);
        padding: 2px 7px;
        border-radius: 999px;
        font-variant-numeric: tabular-nums;
    }
    .monitoring-sidebar-collapse {
        flex-shrink: 0;
        min-height: 32px;
        padding: 4px 8px;
        gap: 4px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--gray-600);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .monitoring-sidebar-collapse__label {
        line-height: 1;
    }
    .monitoring-sidebar-collapse:hover {
        color: var(--primary);
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    }
    .monitoring-sidebar-collapse svg {
        width: 20px;
        height: 20px;
    }
    .monitoring-sidebar-search {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
        height: 36px;
        margin-bottom: 8px;
        border-radius: 9px;
        border: 1px solid var(--border);
        background: var(--surface);
        cursor: text;
    }
    .monitoring-sidebar-search svg {
        width: 18px;
        height: 18px;
        color: var(--gray-500);
        flex-shrink: 0;
    }
    .monitoring-sidebar-search input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        padding: 0;
        font-size: 13px;
        color: var(--gray-900);
        outline: none;
    }
    .monitoring-sidebar-search input::placeholder {
        color: var(--gray-500);
    }
    .monitoring-sidebar-panel {
        margin: 0;
    }
    .monitoring-sidebar-panel__summary {
        list-style: none;
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-500);
        padding: 4px 0;
        user-select: none;
    }
    .monitoring-sidebar-panel__summary::-webkit-details-marker {
        display: none;
    }
    .monitoring-sidebar-panel__summary::before {
        content: '▸ ';
        display: inline-block;
        transition: transform 0.15s ease;
    }
    .monitoring-sidebar-panel[open] .monitoring-sidebar-panel__summary::before {
        transform: rotate(90deg);
    }
    .monitoring-hosts-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
        font-size: 11px;
    }
    .monitoring-segment--compact {
        width: 100%;
    }
    .monitoring-segment--compact .monitoring-segment__btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 6px 6px;
        font-size: 11px;
    }
    .monitoring-summary-pill {
        padding: 3px 8px;
        border-radius: 999px;
        font-weight: 600;
        border: 1px solid transparent;
    }
    .monitoring-summary-pill--online {
        color: #047857;
        background: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.25);
    }
    .monitoring-summary-pill--offline {
        color: #b91c1c;
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.22);
    }
    .monitoring-summary-pill--pending {
        color: #b45309;
        background: rgba(245, 158, 11, 0.14);
        border-color: rgba(245, 158, 11, 0.28);
    }
    .monitoring-agents-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px 10px 12px;
        gap: 6px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .monitoring-list-placeholder {
        padding: 24px 14px;
        text-align: center;
        font-size: 13px;
        line-height: 1.45;
        color: var(--gray-600);
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
    }
    .monitoring-main {
        padding: 16px 18px 20px;
        min-height: 480px;
    }
    .monitoring-agent-detail {
        min-height: 360px;
    }
    .monitoring-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 48px 24px;
        min-height: 360px;
        color: var(--gray-600);
    }
    .monitoring-empty-icon {
        font-size: 2.5rem;
        line-height: 1;
        margin-bottom: 12px;
        opacity: 0.85;
    }
    .monitoring-empty-title {
        margin: 0 0 8px;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--gray-800);
    }
    .monitoring-empty-text {
        margin: 0;
        max-width: 28rem;
        font-size: 14px;
        line-height: 1.5;
    }
    .monitoring-section {
        margin-top: 14px;
    }
    .monitoring-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
    .monitoring-section-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--gray-800);
    }
    .monitoring-section-hint {
        font-size: 12px;
        color: var(--gray-500);
    }
    .monitoring-charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px;
    }
    .monitoring-dashboard {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        align-items: stretch;
    }
    .monitoring-block {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        box-shadow: var(--shadow-sm);
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .monitoring-block--cpu,
    .monitoring-block--network,
    .monitoring-block--system {
        grid-column: 1 / -1;
    }
    .monitoring-block--memory {
        grid-column: span 6;
    }
    .monitoring-block--disk {
        grid-column: span 6;
    }
    .monitoring-block--process,
    .monitoring-block--custom,
    .monitoring-block--other {
        grid-column: span 6;
    }
    @media (max-width: 900px) {
        .monitoring-block--memory,
        .monitoring-block--disk,
        .monitoring-block--process,
        .monitoring-block--custom,
        .monitoring-block--other {
            grid-column: 1 / -1;
        }
    }
    .monitoring-block-title {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-800);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .monitoring-block-body {
        min-width: 0;
    }
    .monitoring-block-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .monitoring-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
        gap: 10px;
        width: 100%;
        flex: 1;
        align-content: stretch;
    }
    .monitoring-stat-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 14px 16px;
        border-radius: 10px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        min-width: 0;
        min-height: 100%;
        position: relative;
        overflow: hidden;
    }
    .monitoring-stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--success);
    }
    .monitoring-stat-card--warn::before { background: var(--warning); }
    .monitoring-stat-card--danger::before { background: var(--danger); }
    .monitoring-stat-card--primary {
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary, #2563eb) 6%, var(--bg-secondary)) 0%, var(--surface) 100%);
    }
    .monitoring-stat-card__label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        line-height: 1.3;
    }
    .monitoring-stat-card__value {
        font-size: 1.65rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--gray-900);
        font-variant-numeric: tabular-nums;
    }
    .monitoring-stat-card--primary .monitoring-stat-card__value {
        font-size: 1.85rem;
    }
    .monitoring-stat-card__sub {
        font-size: 12px;
        color: var(--gray-600);
        line-height: 1.35;
    }
    .monitoring-stat-card__bar {
        height: 6px;
        border-radius: 999px;
        margin-top: 2px;
    }
    .monitoring-tiles-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .monitoring-tile {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 68px;
        flex: 0 1 156px;
        max-width: 200px;
        min-width: 132px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .monitoring-tile:hover {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
    }
    .monitoring-tile--highlight {
        flex: 1 1 180px;
        max-width: 240px;
        background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--surface) 100%);
        border-color: var(--primary-light);
    }
    .monitoring-tile--compact {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        min-height: 0;
        padding: 6px 8px;
    }
    .monitoring-tile--compact .monitoring-tile-value {
        font-size: 1rem;
        margin-top: 0;
    }
    .monitoring-tile--compact:not(:has(.monitoring-tile-label)) {
        justify-content: center;
        min-height: 52px;
    }
    .monitoring-tile--compact .monitoring-tile-label {
        font-size: 10px;
    }
    .monitoring-tile-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.15;
        letter-spacing: -0.02em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .monitoring-change-icon {
        font-size: 0.95em;
        font-weight: 700;
        line-height: 1;
    }
    .monitoring-change-icon--up { color: var(--success); }
    .monitoring-change-icon--down { color: var(--danger); }
    .monitoring-change-icon--same { color: var(--text-muted); }
    .monitoring-change-icon--changed { color: var(--warning); }
    .monitoring-tile--highlight .monitoring-tile-value {
        font-size: 1.45rem;
    }
    .monitoring-tile-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--gray-500);
        line-height: 1.25;
        order: 1;
    }
    .monitoring-tile-value {
        order: 2;
    }
    .monitoring-tile-sub {
        order: 3;
    }
    .monitoring-tile-bar {
        order: 4;
    }
    .monitoring-tile-bar {
        margin-top: 6px;
        height: 6px;
        background: var(--border);
        border-radius: 999px;
        overflow: hidden;
    }
    .monitoring-tile-bar > span {
        display: block;
        height: 100%;
        border-radius: 999px;
        transition: width 0.3s ease;
    }
    .monitoring-tile-bar--ok > span { background: var(--success); }
    .monitoring-tile-bar--warn > span { background: var(--warning); }
    .monitoring-tile-bar--danger > span { background: var(--danger); }
    .monitoring-tile-bar--empty > span { background: transparent; }
    .monitoring-block--cpu .monitoring-block-title { color: #1d4ed8; }
    .monitoring-block--memory .monitoring-block-title { color: #7c3aed; }
    .monitoring-block--disk .monitoring-block-title { color: #0d9488; }
    .monitoring-block--network .monitoring-block-title { color: #0891b2; }
    .monitoring-net-panel {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }
    .monitoring-net-summary {
        padding: 12px 14px;
        border-radius: 10px;
        background: linear-gradient(165deg, color-mix(in srgb, #0891b2 8%, var(--bg-secondary)) 0%, var(--surface) 55%);
        border: 1px solid color-mix(in srgb, #0891b2 22%, var(--border));
    }
    .monitoring-net-summary__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }
    .monitoring-net-summary__title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gray-600);
    }
    .monitoring-net-summary__title-ip {
        text-transform: none;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        color: var(--gray-500);
        font-weight: 800;
    }
    .monitoring-net-summary__scale {
        font-size: 11px;
        color: var(--gray-500);
        font-variant-numeric: tabular-nums;
    }
    .monitoring-net-summary .monitoring-net-iface-card {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
    }
    .monitoring-net-summary .monitoring-net-iface-card__gauges {
        justify-content: center;
        gap: 20px;
    }
    .monitoring-net-solo {
        padding: 12px 14px 16px;
        border-radius: 10px;
        background: linear-gradient(165deg, color-mix(in srgb, #0891b2 8%, var(--bg-secondary)) 0%, var(--surface) 55%);
        border: 1px solid color-mix(in srgb, #0891b2 22%, var(--border));
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .monitoring-net-solo .monitoring-net-summary__head {
        width: 100%;
        max-width: 420px;
    }
    .monitoring-net-iface-card--solo {
        width: 100%;
        max-width: 420px;
        margin-top: 4px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .monitoring-net-iface-card--solo .monitoring-net-iface-card__title {
        display: none;
    }
    .monitoring-net-iface-card--solo .monitoring-net-iface-card__gauges {
        justify-content: center;
        gap: clamp(12px, 4vw, 28px);
    }
    .monitoring-net-iface-card--in-summary {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
    }
    .monitoring-net-ifaces {
        display: grid;
        gap: 12px;
        width: 100%;
        align-items: stretch;
    }
    .monitoring-net-ifaces--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
        margin: 0 auto;
    }
    .monitoring-net-ifaces--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 960px;
        margin: 0 auto;
    }
    .monitoring-net-ifaces--many {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    }
    .monitoring-net-ifaces--2 .monitoring-net-iface-card,
    .monitoring-net-ifaces--3 .monitoring-net-iface-card,
    .monitoring-net-ifaces--many .monitoring-net-iface-card {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
    }
    .monitoring-net-ifaces--2 .monitoring-net-iface-card__gauges,
    .monitoring-net-ifaces--3 .monitoring-net-iface-card__gauges,
    .monitoring-net-ifaces--many .monitoring-net-iface-card__gauges {
        flex: 1;
        justify-content: space-evenly;
        align-items: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }
    @media (max-width: 900px) {
        .monitoring-net-ifaces--3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-width: 720px;
        }
    }
    @media (max-width: 560px) {
        .monitoring-net-ifaces--2,
        .monitoring-net-ifaces--3 {
            grid-template-columns: 1fr;
            max-width: 420px;
        }
        .monitoring-net-ifaces--2 .monitoring-net-iface-card__gauges,
        .monitoring-net-ifaces--3 .monitoring-net-iface-card__gauges {
            flex-wrap: wrap;
            justify-content: center;
        }
    }
    .monitoring-net-iface-card {
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        min-width: 0;
        box-sizing: border-box;
    }
    .monitoring-net-iface-card__title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    }
    .monitoring-net-iface-card__iface-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }
    .monitoring-net-iface-card__iface-ip {
        flex: 0 0 auto;
        font-size: 11px;
        color: var(--gray-500);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .monitoring-net-iface-card__gauges {
        display: flex;
        align-items: flex-end;
        justify-content: space-evenly;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .monitoring-net-gauge {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
    }
    .monitoring-net-gauge__svg {
        display: block;
        overflow: visible;
    }
    .monitoring-net-gauge__track {
        stroke: color-mix(in srgb, var(--gray-400, #94a3b8) 35%, var(--border));
    }
    .monitoring-net-gauge--recv .monitoring-net-gauge__fill {
        stroke: #0891b2;
    }
    .monitoring-net-gauge--sent .monitoring-net-gauge__fill {
        stroke: #6366f1;
    }
    .monitoring-net-gauge--warn .monitoring-net-gauge__fill {
        stroke: var(--warning, #f59e0b);
    }
    .monitoring-net-gauge--danger .monitoring-net-gauge__fill {
        stroke: var(--danger, #ef4444);
    }
    .monitoring-net-gauge__readout {
        position: relative;
        margin-top: -28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
        pointer-events: none;
        padding: 0 4px 2px;
        max-width: 100%;
    }
    .monitoring-net-gauge--lg .monitoring-net-gauge__readout {
        margin-top: -34px;
    }
    .monitoring-net-gauge--sm .monitoring-net-gauge__readout {
        margin-top: -22px;
    }
    .monitoring-net-gauge__dir {
        font-size: 11px;
        line-height: 1;
        opacity: 0.75;
        color: var(--gray-500);
    }
    .monitoring-net-gauge--lg .monitoring-net-gauge__dir {
        font-size: 13px;
    }
    .monitoring-net-gauge__value {
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--gray-900);
        font-variant-numeric: tabular-nums;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .monitoring-net-gauge__label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
    }
    .monitoring-net-gauge__sub {
        font-size: 10px;
        color: var(--gray-500);
        line-height: 1.2;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .monitoring-net-extras {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .monitoring-net-extra {
        flex: 1 1 200px;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px dashed var(--border);
        background: var(--surface);
    }
    .monitoring-net-wrap {
        width: 100%;
        overflow-x: auto;
    }
    .monitoring-net-table {
        width: 100%;
        min-width: 320px;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 13px;
    }
    .monitoring-identity-diff-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 13px;
    }
    .monitoring-identity-diff-col-field {
        width: 28%;
    }
    .monitoring-identity-diff-col-old,
    .monitoring-identity-diff-col-new {
        width: 36%;
    }
    .monitoring-identity-diff-table thead th,
    .monitoring-identity-diff-table tbody td {
        text-align: left;
        vertical-align: top;
        word-break: break-word;
    }
    .monitoring-identity-diff-table tbody td code {
        font-size: 12px;
        white-space: pre-wrap;
        word-break: break-all;
    }
    .monitoring-net-col-iface {
        width: 46%;
    }
    .monitoring-net-col-rate {
        width: 27%;
    }
    .monitoring-net-table thead th {
        padding: 8px 12px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-500);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .monitoring-net-th-iface,
    .monitoring-net-table .monitoring-net-iface {
        text-align: left;
    }
    .monitoring-net-th-rate,
    .monitoring-net-table .monitoring-net-rate {
        text-align: right;
        white-space: nowrap;
    }
    .monitoring-net-table tbody td,
    .monitoring-net-table tfoot td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .monitoring-net-table tbody tr:last-child td {
        border-bottom: none;
    }
    .monitoring-net-table tbody tr:hover td {
        background: color-mix(in srgb, var(--primary, #2563eb) 6%, transparent);
    }
    .monitoring-net-iface {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-800);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .monitoring-net-value {
        display: inline-block;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--gray-900);
        font-size: 13px;
    }
    .monitoring-net-value--empty {
        font-weight: 500;
        color: var(--gray-500);
    }
    .monitoring-net-rate--wide {
        text-align: right;
    }
    .monitoring-net-table tfoot {
        border-top: 2px solid var(--border);
    }
    .monitoring-net-table tfoot tr.monitoring-net-row--total td {
        background: var(--bg-secondary);
        font-weight: 700;
        border-bottom: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .monitoring-net-table tfoot tr.monitoring-net-row--total .monitoring-net-iface {
        color: var(--gray-900);
    }
    .monitoring-net-row--extra .monitoring-net-iface {
        font-weight: 500;
        font-family: inherit;
    }
    .monitoring-net-empty-msg,
    .monitoring-net-hint {
        margin: 0 0 8px;
        font-size: 12px;
        color: var(--gray-600);
    }
    .monitoring-cpu-panel {
        display: grid;
        grid-template-columns: minmax(148px, 200px) minmax(0, 1fr);
        gap: 12px;
        align-items: stretch;
    }
    .monitoring-cpu-panel--loads-only,
    .monitoring-cpu-panel--usage-only {
        grid-template-columns: 1fr;
    }
    .monitoring-cpu-panel__usage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }
    .monitoring-cpu-panel__usage::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--success);
    }
    .monitoring-cpu-panel__usage--warn::before { background: var(--warning); }
    .monitoring-cpu-panel__usage--danger::before { background: var(--danger); }
    .monitoring-cpu-panel__usage-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gray-500);
    }
    .monitoring-cpu-panel__usage-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--gray-900);
        font-variant-numeric: tabular-nums;
    }
    .monitoring-cpu-panel__bar {
        height: 6px;
        border-radius: 999px;
    }
    .monitoring-cpu-panel__loads {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 12px 14px;
        border-radius: 10px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
    }
    .monitoring-cpu-panel__loads-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .monitoring-cpu-panel__loads-title {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gray-500);
        white-space: nowrap;
    }
    .monitoring-cpu-panel__badges {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .monitoring-cpu-panel__badge {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--gray-700);
        padding: 4px 10px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--border);
        white-space: nowrap;
    }
    .monitoring-cpu-panel__badge--trend {
        color: var(--gray-800);
    }
    .monitoring-cpu-panel__loads-grid {
        display: grid;
        gap: 8px;
        width: 100%;
    }
    .monitoring-cpu-panel__loads-grid--1 { grid-template-columns: 1fr; }
    .monitoring-cpu-panel__loads-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .monitoring-cpu-panel__loads-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .monitoring-cpu-panel__load {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 8px;
        border-radius: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        text-align: center;
    }
    .monitoring-cpu-panel__load--ok { box-shadow: inset 0 -3px 0 var(--success); }
    .monitoring-cpu-panel__load--warn {
        box-shadow: inset 0 -3px 0 var(--warning);
        background: color-mix(in srgb, var(--warning) 5%, var(--surface));
    }
    .monitoring-cpu-panel__load--danger {
        box-shadow: inset 0 -3px 0 var(--danger);
        background: color-mix(in srgb, var(--danger) 6%, var(--surface));
    }
    .monitoring-cpu-panel__load-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
    }
    .monitoring-cpu-panel__load-value {
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1;
        color: var(--gray-900);
        font-variant-numeric: tabular-nums;
    }
    .monitoring-tiles-grid--cpu-extra {
        margin-top: 10px;
    }
    @media (max-width: 640px) {
        .monitoring-cpu-panel {
            grid-template-columns: 1fr;
        }
        .monitoring-cpu-panel__loads-top {
            flex-wrap: wrap;
        }
        .monitoring-cpu-panel__loads-grid--3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    .monitoring-block--process .monitoring-block-title { color: #c2410c; }
    .monitoring-block--system .monitoring-block-title { color: #6366f1; }
    .monitoring-tile-sub {
        font-size: 12px;
        color: var(--gray-600);
        line-height: 1.35;
        margin-top: 2px;
    }
    .monitoring-health {
        margin: 0 0 10px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
    }
    .monitoring-health--ok {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, var(--surface) 100%);
        border-color: rgba(16, 185, 129, 0.35);
    }
    .monitoring-health--warn {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, var(--surface) 100%);
        border-color: rgba(245, 158, 11, 0.4);
    }
    .monitoring-health--danger {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, var(--surface) 100%);
        border-color: rgba(239, 68, 68, 0.4);
    }
    .monitoring-health-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
    }
    .monitoring-health-icon { font-size: 1.5rem; line-height: 1; }
    .monitoring-health-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--gray-900);
    }
    .monitoring-health-status {
        font-size: 12px;
        color: var(--gray-600);
        margin-top: 2px;
    }
    .monitoring-health-list {
        margin: 0;
        padding-left: 1.25rem;
        font-size: 13px;
        color: var(--gray-700);
        line-height: 1.5;
    }
    .monitoring-health-list li { margin: 4px 0; }
    .monitoring-agents-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .monitoring-agent-btn {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface);
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        font: inherit;
        color: inherit;
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .monitoring-agent-btn:hover {
        box-shadow: var(--shadow-sm);
        border-color: var(--gray-300);
    }
    .monitoring-agent-btn.active {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    .monitoring-agent-btn-head {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .monitoring-agent-status-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--gray-400);
    }
    .monitoring-agent-btn-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .monitoring-agent-status-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .monitoring-agent-btn-meta {
        font-size: 12px;
        color: var(--gray-600);
        padding-left: 17px;
        line-height: 1.35;
    }
    .monitoring-agent-btn--online {
        border-left: 3px solid var(--success);
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, var(--surface) 28%);
    }
    .monitoring-agent-btn--online .monitoring-agent-status-dot { background: var(--success); }
    .monitoring-agent-btn--online .monitoring-agent-status-badge {
        color: #047857;
        background: rgba(16, 185, 129, 0.15);
    }
    .monitoring-agent-btn--offline {
        border-left: 3px solid var(--danger);
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--surface) 28%);
    }
    .monitoring-agent-btn--offline .monitoring-agent-status-dot { background: var(--danger); }
    .monitoring-agent-btn--offline .monitoring-agent-status-badge {
        color: #b91c1c;
        background: rgba(239, 68, 68, 0.14);
    }
    .monitoring-agent-btn--pending {
        border-left: 3px solid var(--warning);
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, var(--surface) 28%);
    }
    .monitoring-agent-btn--pending .monitoring-agent-status-dot { background: var(--warning); }
    .monitoring-agent-btn--pending .monitoring-agent-status-badge {
        color: #b45309;
        background: rgba(245, 158, 11, 0.18);
    }
    .monitoring-agent-btn--unknown {
        border-left: 3px solid var(--gray-400);
    }
    .monitoring-agent-btn--unknown .monitoring-agent-status-badge {
        color: var(--gray-700);
        background: var(--bg-secondary);
    }
    .monitoring-host-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 18px;
        padding: 18px 20px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }
    .monitoring-host-header-body {
        flex: 1;
        min-width: 0;
    }
    .monitoring-host-header-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }
    .monitoring-host-title {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gray-900);
        line-height: 1.2;
    }
    .monitoring-host-subtitle {
        margin: 4px 0 0;
        font-size: 13px;
        color: var(--gray-600);
    }
    .monitoring-host-status-badge {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .monitoring-host-header--online .monitoring-host-status-badge {
        color: #047857;
        background: rgba(16, 185, 129, 0.15);
    }
    .monitoring-host-header--offline .monitoring-host-status-badge {
        color: #b91c1c;
        background: rgba(239, 68, 68, 0.14);
    }
    .monitoring-host-header--pending .monitoring-host-status-badge {
        color: #b45309;
        background: rgba(245, 158, 11, 0.18);
    }
    .monitoring-host-header--unknown .monitoring-host-status-badge {
        color: var(--gray-700);
        background: var(--bg-secondary);
    }
    .monitoring-host-header--online {
        border-left: 4px solid var(--success);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.07) 0%, var(--surface) 42%);
    }
    .monitoring-host-header--offline {
        border-left: 4px solid var(--danger);
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--surface) 42%);
    }
    .monitoring-host-header--pending {
        border-left: 4px solid var(--warning);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--surface) 42%);
    }
    .monitoring-host-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }
    .monitoring-host-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 8px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        color: var(--gray-800);
    }
    .monitoring-host-chip-icon {
        font-size: 13px;
        line-height: 1;
        opacity: 0.9;
    }
    .monitoring-host-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        font-size: 13px;
    }
    .monitoring-host-meta-item {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
    }
    .monitoring-host-meta-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-500);
        font-weight: 600;
    }
    .monitoring-host-meta-value {
        color: var(--gray-800);
    }
    .monitoring-host-meta-value strong {
        font-weight: 600;
        color: var(--gray-900);
    }
    .monitoring-host-meta-muted {
        margin-left: 6px;
        color: var(--gray-500);
        font-size: 12px;
    }
    .monitoring-host-meta-sep {
        width: 1px;
        height: 14px;
        background: var(--border);
        align-self: center;
    }
    .monitoring-host-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        flex-shrink: 0;
        align-items: flex-start;
    }
    .monitoring-host-menu {
        position: relative;
    }
    .monitoring-host-menu-toggle {
        min-width: 36px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
        line-height: 1;
    }
    .monitoring-host-menu-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 20;
        min-width: 168px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .monitoring-host-menu-dropdown[hidden] {
        display: none !important;
    }
    .monitoring-host-menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 10px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--gray-800);
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }
    .monitoring-host-menu-item:hover {
        background: var(--gray-50, rgba(0, 0, 0, 0.05));
    }
    .monitoring-host-menu-item--danger {
        color: var(--danger, #dc2626);
    }
    .monitoring-host-menu-item--danger:hover {
        background: rgba(220, 38, 38, 0.08);
    }
    .monitoring-chart-card {
        padding: 12px 14px 12px;
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        display: flex;
        flex-direction: column;
        min-height: 168px;
        overflow: hidden;
    }
    .monitoring-chart-card:hover {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-md);
    }
    .monitoring-chart-card--warn {
        border-color: rgba(245, 158, 11, 0.55);
    }
    .monitoring-chart-card--danger {
        border-color: rgba(239, 68, 68, 0.65);
    }
    .monitoring-chart-card-title {
        margin: 0 0 4px;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-800);
        line-height: 1.3;
    }
    .monitoring-chart-card-desc {
        margin: 0 0 8px;
        font-size: 11px;
        color: var(--gray-500);
        line-height: 1.35;
        flex: 0 0 auto;
    }
    .monitoring-chart-card-canvas {
        flex: 1;
        min-height: 110px;
        position: relative;
    }
    .monitoring-chart-card-canvas canvas {
        display: block;
        width: 100% !important;
        height: 110px !important;
        max-height: 120px;
    }
    .monitoring-chart-card-empty {
        margin: 0;
        padding: 24px 8px;
        text-align: center;
        font-size: 12px;
        color: var(--gray-500);
        line-height: 1.4;
    }
    .monitoring-chart-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        padding: 16px 12px;
        text-align: center;
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(148, 163, 184, 0.06) 0%, transparent 100%);
        border: 1px dashed rgba(148, 163, 184, 0.28);
    }
    .monitoring-chart-empty-state__icon {
        font-size: 22px;
        line-height: 1;
        opacity: 0.55;
        margin-bottom: 6px;
    }
    .monitoring-chart-empty-state__title {
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-600);
    }
    .monitoring-chart-empty-state__hint {
        margin: 0;
        font-size: 11px;
        line-height: 1.45;
        color: var(--gray-500);
        max-width: 28em;
    }
    .monitoring-chart-card-stats--snapshot {
        flex-wrap: wrap;
        gap: 6px 10px;
    }
    .monitoring-chart-card-hint {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 10px;
        font-size: 10px;
        color: var(--gray-400);
        margin: 8px 0 0;
        padding: 0 2px;
        line-height: 1.35;
        text-align: center;
        flex: 0 0 auto;
    }
    .monitoring-chart-card-hint__main {
        white-space: nowrap;
    }
    .monitoring-chart-card-hint__legend {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 10px;
        color: var(--gray-500);
    }
    .monitoring-chart-offline-legend {
        display: inline-block;
        flex-shrink: 0;
        width: 10px;
        height: 8px;
        margin: 0;
        vertical-align: middle;
        background: repeating-linear-gradient(
            -45deg,
            rgba(148, 163, 184, 0.35),
            rgba(148, 163, 184, 0.35) 2px,
            rgba(148, 163, 184, 0.12) 2px,
            rgba(148, 163, 184, 0.12) 4px
        );
        border: 1px solid rgba(100, 116, 139, 0.35);
    }
    .monitoring-chart-offline-legend-note {
        display: inline-block;
        margin-left: 8px;
        font-size: 12px;
        color: var(--gray-600);
    }
    .monitoring-chart-modal-content {
        max-width: min(920px, 96vw);
        width: 100%;
    }
    .monitoring-pdf-modal-content {
        max-width: min(560px, 96vw);
        width: 100%;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .monitoring-pdf-modal-desc {
        font-size: 13px;
        color: var(--gray-600);
        margin: 0 0 10px;
        line-height: 1.45;
    }
    .monitoring-pdf-backend-hint {
        font-size: 12px;
        font-weight: 600;
        color: var(--primary);
        margin: 0 0 10px;
    }
    .monitoring-pdf-period-wrap {
        margin-bottom: 12px;
    }
    .monitoring-pdf-fieldset {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px 8px;
        margin: 0 0 10px;
    }
    .monitoring-pdf-fieldset legend {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-500);
        padding: 0 4px;
    }
    .monitoring-pdf-check {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--gray-800);
        margin: 0 0 6px;
        cursor: pointer;
    }
    .monitoring-pdf-progress {
        margin: 12px 0 4px;
    }
    .monitoring-pdf-progress-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        overflow: hidden;
    }
    .monitoring-pdf-progress-bar > span {
        display: block;
        height: 100%;
        background: var(--primary);
        transition: width 0.35s ease;
    }
    .monitoring-pdf-progress-text {
        font-size: 12px;
        color: var(--gray-600);
        margin: 6px 0 0;
    }
    .monitoring-pdf-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 14px;
    }
    .monitoring-chart-modal-desc {
        font-size: 14px;
        color: var(--gray-700);
        line-height: 1.5;
        margin: 0 0 12px;
    }
    .monitoring-chart-modal-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        font-size: 12px;
        color: var(--gray-600);
        margin-bottom: 12px;
    }
    .monitoring-chart-modal-meta code {
        font-size: 11px;
        background: var(--bg-secondary);
        padding: 2px 6px;
        border-radius: 4px;
    }
    .monitoring-chart-modal-stats {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .monitoring-chart-stat {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 12px;
    }
    .monitoring-chart-stat-value {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.25;
        word-break: break-word;
        font-variant-numeric: tabular-nums;
    }
    .monitoring-chart-stat-value--warn {
        color: var(--warning, #d97706);
    }
    .monitoring-chart-stat-value--danger {
        color: var(--danger, #dc2626);
    }
    .monitoring-chart-stat-label {
        font-size: 11px;
        color: var(--gray-600);
        margin-top: 2px;
    }
    .monitoring-chart-modal-canvas-wrap {
        position: relative;
        height: min(420px, 58vh);
        width: 100%;
        overflow: hidden;
        padding-bottom: 4px;
    }
    .monitoring-chart-modal-canvas-wrap canvas {
        width: 100% !important;
        height: 100% !important;
    }
    .monitoring-chart-period.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
    .monitoring-section-head--charts {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px 16px;
    }
    .monitoring-section-head--charts .monitoring-section-hint {
        display: block;
        margin-top: 2px;
    }
    .monitoring-chart-period-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--gray-700);
        cursor: pointer;
        text-align: left;
        font: inherit;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .monitoring-chart-period-trigger:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    .monitoring-chart-period-trigger__label {
        font-size: 12px;
        font-weight: 700;
        color: var(--gray-700);
        white-space: nowrap;
    }
    .monitoring-chart-period-trigger__value {
        font-size: 11px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
        border-radius: 999px;
        padding: 2px 9px;
        white-space: nowrap;
    }
    .monitoring-chart-period-trigger__edit {
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-500);
        margin-left: 2px;
    }
    .monitoring-chart-period-modal {
        z-index: 10050;
    }
    .monitoring-chart-period-modes {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 18px;
    }
    .monitoring-chart-period-fields .form-group {
        margin-bottom: 14px;
    }
    .monitoring-chart-period-fields .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .monitoring-chart-period-rolling-row {
        display: grid;
        grid-template-columns: minmax(96px, 1fr) minmax(96px, 140px);
        gap: 10px;
        align-items: stretch;
    }
    .monitoring-chart-period-modal-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px;
        padding-top: 4px;
    }
    .monitoring-chart-period-modal .form-hint {
        font-size: 12px;
        color: var(--gray-500);
        margin: 0;
        line-height: 1.4;
    }
    .monitoring-chart-modal-period-wrap {
        margin-bottom: 12px;
    }
    .monitoring-chart-stats-heading {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .monitoring-chart-card-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        margin: 0 0 8px;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }
    .monitoring-chart-card-stats--empty {
        color: var(--gray-500);
        font-size: 11px;
        margin-bottom: 6px;
    }
    .monitoring-chart-card-stat {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    }
    .monitoring-chart-card-stat-lbl {
        color: var(--gray-500);
        font-size: 10px;
        text-transform: uppercase;
    }
    .monitoring-chart-card-stat-val {
        font-weight: 600;
        color: var(--gray-800);
    }
    .monitoring-chart-card-stat-val.monitoring-chart-stat-value--warn {
        color: var(--warning, #d97706);
    }
    .monitoring-chart-card-stat-val.monitoring-chart-stat-value--danger {
        color: var(--danger, #dc2626);
    }
    .monitoring-mh-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 10002;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    .monitoring-mh-overlay .card {
        width: min(640px, 96vw);
        max-height: 90vh;
        overflow: auto;
        padding: 16px;
    }
    .monitoring-host-settings-modal .mh-host-card {
        width: min(920px, 96vw);
    }
    .monitoring-mh-overlay .mh-picker-card--wide {
        width: min(720px, 96vw);
    }
    .mh-row-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
    }
    .mh-action-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 52px;
        padding: 4px 6px;
        font-size: 10px;
        line-height: 1.2;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--gray-700);
        cursor: pointer;
    }
    .mh-action-btn--inline {
        flex-direction: row;
        min-width: 0;
        padding: 5px 8px;
        gap: 5px;
        font-size: 11px;
    }
    .mh-action-btn--inline .mh-action-label {
        font-size: 11px;
    }
    .mh-action-btn:hover {
        border-color: var(--primary-light);
        color: var(--primary);
    }
    .mh-action-btn.mh-action-btn--danger:hover {
        border-color: var(--danger);
        color: var(--danger);
    }
    .mh-action-icon {
        font-size: 14px;
        line-height: 1;
    }
    .mh-action-label {
        font-size: 10px;
        white-space: nowrap;
    }
    .mh-formula-display {
        font-family: ui-monospace, monospace;
        font-size: 14px;
        min-height: 48px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--gray-50, rgba(0, 0, 0, 0.04));
        word-break: break-all;
        line-height: 1.45;
    }
    .mh-formula-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }
    .mh-formula-num-wrap {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .mh-formula-num-input {
        width: 88px;
        min-height: 31px;
    }
    .mh-metric-pick-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 6px;
        max-height: 240px;
        overflow: auto;
        margin-top: 8px;
    }
    .mh-metric-pick-btn {
        text-align: left;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
        font-size: 12px;
    }
    .mh-metric-pick-btn:hover {
        border-color: var(--primary);
    }
    .mh-metric-pick-btn strong {
        display: block;
        font-size: 13px;
    }
    .mh-metric-pick-btn span {
        color: var(--gray-600);
        font-size: 11px;
    }
    .mh-metrics-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-end;
        margin-bottom: 8px;
    }
    .mh-metrics-search-wrap {
        flex: 1;
        min-width: 180px;
        margin: 0;
    }
    .mh-metrics-cat-select {
        width: auto;
        min-width: 140px;
    }
    .mh-metrics-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }
    .mh-metrics-summary {
        font-size: 13px;
        color: var(--gray-600);
    }
    .mh-seg {
        display: inline-flex;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
    }
    .mh-seg-btn {
        border: none;
        background: var(--surface);
        color: var(--gray-700);
        padding: 6px 12px;
        font-size: 12px;
        cursor: pointer;
    }
    .mh-seg-btn:hover {
        background: var(--gray-50, rgba(0, 0, 0, 0.04));
    }
    .mh-seg-btn.active {
        background: var(--primary);
        color: #fff;
    }
    .mh-seg-btn + .mh-seg-btn {
        border-left: 1px solid var(--border);
    }
    .mh-metrics-scroll {
        max-height: min(52vh, 420px);
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 6px;
        background: var(--gray-50, rgba(0, 0, 0, 0.03));
    }
    .mh-metrics-empty {
        padding: 16px;
        text-align: center;
        color: var(--gray-600);
        font-size: 13px;
    }
    .mh-metric-group {
        margin-bottom: 8px;
    }
    .mh-metric-group:last-child {
        margin-bottom: 0;
    }
    .mh-metric-group-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--surface, #fff);
        border-radius: 8px;
        padding: 6px 8px;
        margin-bottom: 4px;
        border: 1px solid var(--border);
    }
    .mh-metric-group-select {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        margin: 0;
    }
    .mh-metric-group-count {
        margin-left: auto;
        font-size: 11px;
        font-weight: 500;
        color: var(--gray-600);
        background: var(--gray-50, rgba(0, 0, 0, 0.05));
        padding: 2px 8px;
        border-radius: 999px;
    }
    .mh-metric-group-items {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .mh-metric-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
        margin: 0;
    }
    .mh-metric-item:hover {
        border-color: var(--primary-light);
    }
    .mh-metric-item--on {
        border-color: var(--primary-light);
        background: rgba(59, 130, 246, 0.06);
    }
    .mh-metric-item-check {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        cursor: pointer;
    }
    .mh-metric-item-body {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
    }
    .mh-metric-item-title {
        font-weight: 600;
        font-size: 13px;
    }
    .mh-metric-item-key {
        font-size: 11px;
        color: var(--gray-600);
        background: transparent;
    }
    .mh-metric-item-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
    }
    .mh-metric-badge {
        font-size: 10px;
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--gray-100, rgba(0, 0, 0, 0.06));
        color: var(--gray-700);
    }
    .mh-metric-item-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        flex-shrink: 0;
    }
    .mh-picker-list {
        max-height: min(60vh, 480px);
        overflow: auto;
        margin-top: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px;
    }
    .mh-picker-group {
        margin-bottom: 10px;
    }
    .mh-picker-group-title {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-700);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mh-picker-group-count {
        font-weight: 500;
        color: var(--gray-500);
        font-size: 11px;
    }
    .mh-picker-group-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .mh-picker-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
    }
    .mh-picker-item:hover {
        border-color: var(--primary);
        background: rgba(59, 130, 246, 0.06);
    }
    .mh-picker-item-title {
        font-weight: 600;
        font-size: 13px;
    }
    .mh-picker-item-key {
        font-size: 11px;
        color: var(--gray-600);
    }
    .mh-picker-empty {
        padding: 12px;
        color: var(--gray-600);
        font-size: 13px;
        text-align: center;
    }
    .mh-table-actions-col {
        width: 200px;
        text-align: right;
    }
    #monitoring-scripts-list .monitoring-script-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface) 96%, var(--border));
        border-left: 4px solid var(--gray-400);
        transition: border-color 0.2s, background 0.2s, opacity 0.2s;
    }
    #monitoring-scripts-list .monitoring-script-card--on {
        border-left-color: var(--success, #2e7d32);
        background: color-mix(in srgb, var(--success, #2e7d32) 6%, var(--surface));
    }
    #monitoring-scripts-list .monitoring-script-card--off {
        border-left-color: var(--gray-500);
        background: color-mix(in srgb, var(--gray-500) 8%, var(--surface));
        opacity: 0.88;
    }
    #monitoring-scripts-list .monitoring-script-card--error {
        border-left-color: var(--danger);
        background: color-mix(in srgb, var(--danger) 6%, var(--surface));
    }
    #monitoring-scripts-list .monitoring-script-card--pending {
        border-left-color: var(--warning, #b8860b);
    }
    #monitoring-scripts-list .monitoring-script-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }
    #monitoring-scripts-list .monitoring-script-card-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    #monitoring-scripts-list .monitoring-script-card-title strong {
        font-size: 14px;
        color: var(--gray-900);
    }
    #monitoring-scripts-list .monitoring-script-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    #monitoring-scripts-list .monitoring-script-status--on {
        color: var(--success, #1b5e20);
        background: color-mix(in srgb, var(--success, #2e7d32) 18%, transparent);
    }
    #monitoring-scripts-list .monitoring-script-status--off {
        color: var(--gray-700);
        background: color-mix(in srgb, var(--gray-500) 20%, transparent);
    }
    #monitoring-scripts-list .monitoring-script-status--error {
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 14%, transparent);
    }
    #monitoring-scripts-list .monitoring-script-status--pending {
        color: var(--warning, #8a6d00);
        background: color-mix(in srgb, var(--warning, #ffc107) 22%, transparent);
    }
    #monitoring-scripts-list .monitoring-script-source {
        font-size: 11px;
        color: var(--gray-600);
        padding: 2px 7px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }
    #monitoring-scripts-list .monitoring-script-path {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        color: var(--gray-600);
        word-break: break-all;
        margin-top: 4px;
    }
    #monitoring-scripts-list .monitoring-script-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        font-size: 12px;
        color: var(--gray-600);
    }
    #monitoring-scripts-list .monitoring-script-meta-item strong {
        color: var(--gray-800);
        font-weight: 600;
    }
    #monitoring-scripts-list .monitoring-script-actions {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
    }
    #monitoring-scripts-list .monitoring-script-alert {
        font-size: 11px;
        padding: 6px 10px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--danger) 10%, transparent);
        color: var(--danger);
    }
    @media (max-width: 900px) {
        .monitoring-toolbar__bar {
            justify-content: flex-start;
            flex: 1 1 100%;
        }
        .monitoring-toolbar__group,
        .monitoring-toolbar__nav {
            width: 100%;
            flex-wrap: wrap;
        }
        .monitoring-toolbar__sep {
            display: none;
        }
    }
    @media (max-width: 640px) {
        .monitoring-toolbar__group--tools {
            width: 100%;
            justify-content: space-between;
        }
        .monitoring-toolbar__link,
        .monitoring-toolbar__cta {
            width: 100%;
            justify-content: center;
        }
        .monitoring-layout {
            grid-template-columns: 1fr !important;
        }
        .monitoring-sidebar-wrap {
            min-width: 0 !important;
        }
        .monitoring-main {
            min-width: 0;
            overflow: hidden;
        }
        #monitoring-create-actions,
        #monitoring-identity-modal [style*="justify-content:flex-end"],
        #monitoring-scripts-modal [style*="justify-content:flex-end"],
        #monitoring-chart-modal [style*="justify-content:flex-end"] {
            flex-direction: column;
        }
        #monitoring-create-actions > .btn,
        #monitoring-identity-modal [style*="justify-content:flex-end"] > .btn,
        #monitoring-scripts-modal [style*="justify-content:flex-end"] > .btn,
        #monitoring-chart-modal [style*="justify-content:flex-end"] > .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>

{{ vendor_chart_js() }}
<script>
    window.__awmChartReady = (typeof window.awmEnsureChartJs === 'function')
        ? window.awmEnsureChartJs()
        : Promise.resolve();
</script>
<script src="/static/js/monitoring-charts.js?v=20260806a"></script>
<script src="/static/js/monitoring.js?v=net-ifaces-grid-1"></script>
<script id="awm-monitoring-flags-json" type="application/json">{{ {'canManage': can_manage_monitoring, 'canAddHosts': can_add_hosts} | tojson }}</script>
<script>
    window.AWM_MONITORING = JSON.parse(
        document.getElementById('awm-monitoring-flags-json').textContent
    );
</script>
{% endblock %}