/*
 * PEA-CMS
 * Monitoring server analytics
 * Compact and readable layout
 */

.monitoring-chart {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 220px;
}

.monitoring-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.monitoring-chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/*
 * Компактная область SVG-графика.
 */
.monitoring-analytics-chart-box {
    position: relative;
    display: block;
    width: 100%;
    height: 190px;
    min-height: 190px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text, #162033);
}

/*
 * SVG.
 */
.monitoring-analytics-chart-box svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    color: var(--text, #162033);
}

/*
 * Сетка.
 */
.monitoring-graph-grid {
    pointer-events: none;
}

.monitoring-graph-grid line {
    fill: none;
    stroke: var(--border-strong, #cbd5e1);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    stroke-opacity: 0.72;
    vector-effect: non-scaling-stroke;
}

/*
 * Нижняя ось.
 */
.monitoring-graph-axis {
    fill: none;
    stroke: var(--border-strong, #cbd5e1);
    stroke-width: 1;
    stroke-opacity: 0.95;
    vector-effect: non-scaling-stroke;
}

/*
 * Подписи вертикальной оси.
 */
.monitoring-graph-labels text {
    fill: var(--text, #162033);
    font-family: var(--font-sans, sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    dominant-baseline: auto;
    paint-order: stroke;
    stroke: var(--surface, #ffffff);
    stroke-width: 2px;
    stroke-linejoin: round;
}

/*
 * Линия.
 */
.monitoring-graph-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: none !important;
    stroke: var(--primary, #2563eb) !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/*
 * Точки.
 */
.monitoring-graph-point {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: var(--primary, #2563eb) !important;
    stroke: var(--surface, #ffffff) !important;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/*
 * Нет данных.
 */
.monitoring-graph-empty {
    fill: var(--text, #162033);
    font-family: var(--font-sans, sans-serif);
    font-size: 17px;
    font-weight: 600;
}

/*
 * Подписи времени под графиком.
 */
.monitoring-analytics-dates {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    min-height: 20px;
    margin-top: 5px;
    color: var(--text, #162033);
    font-family: var(--font-sans, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/*
 * Дата последнего опроса.
 */
.monitoring-analytics-freshness {
    margin: 8px 0 0;
    color: var(--text-soft, #64748b);
    font-family: var(--font-sans, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/*
 * Панель.
 */
.monitoring-analytics-panel {
    min-width: 0;
}

.monitoring-analytics-chart-box,
.monitoring-analytics-chart-box * {
    box-sizing: border-box;
}

/*
 * Мобильная версия.
 */
@media (max-width: 640px) {
    .monitoring-analytics-chart-box {
        height: 180px;
        min-height: 180px;
    }

    .monitoring-graph-labels text {
        font-size: 14px;
    }

    .monitoring-analytics-dates {
        font-size: 13px;
    }

    .monitoring-analytics-freshness {
        font-size: 13px;
    }
}