/*
 * «مانیتورینگ سرور» — the pictures beside the figures
 * (تسک ۱۴۰۵/۰۶/۱۳/۰۱).
 *
 * A stylesheet of its own rather than more of the page's own `<style>` block:
 * that block is the cards and the tables, and the charts are a different thing
 * added beside them. Nothing here changes anything the page already had — no
 * card, no tab and no table rule is touched (آژانس ـ مانیتورینگ ـ ایمنی ـ ۰۰۱).
 *
 * Every colour is a «رنگ‌های استاندارد» token, and the three states are the
 * panel's own — سالم سبز، هشدار زرد، بحرانی قرمز — so the charts cannot invent a
 * threshold of their own (بند ۶ و ۷).
 */

.fi-storage-charts {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .fi-storage-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* بند ۲۸: on a wide panel the comparison spans both columns; on a narrow one
       everything simply stacks, and nothing makes the page scroll sideways. */
    .fi-storage-chart-wide {
        grid-column: 1 / -1;
    }
}

.fi-storage-chart-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-storage-chart-card {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-900);
}

.fi-storage-chart-title,
.fi-storage-trend-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-storage-chart-title,
:where(.dark) .fi-storage-trend-title {
    color: var(--std-color-gray-100);
}

.fi-storage-chart-note {
    font-size: 0.6875rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-storage-chart-note {
    color: var(--std-color-gray-400);
}

/* ── The capacity ring (بند ۳ … ۵) ────────────────────────────────────────── */

.fi-storage-ring-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.fi-storage-ring-wrap {
    position: relative;
    width: 9.5rem;
    height: 9.5rem;
    flex: none;
}

.fi-storage-ring {
    width: 100%;
    height: 100%;
}

/* استفاده‌شده قرمز، خالی سبز — the same two colours the cards and the tables of
   this page already use (سرور-۰۹), so a ring and the card above it are one
   reading. */
.fi-storage-ring-used {
    fill: var(--std-color-danger-600);
}

:where(.dark) .fi-storage-ring-used {
    fill: var(--std-color-danger-400);
}

/* بند ۷: the ring follows the page's own states rather than a threshold of its
   own — amber while the capacity is not published, and the alarm colour only
   where the monitoring already says there is an alarm. */
.fi-storage-ring-capacity_unknown {
    fill: var(--std-color-warning-500);
}

.fi-storage-ring-unmeasured {
    fill: var(--std-color-gray-400);
}

.fi-storage-ring-free {
    fill: var(--std-color-success-600);
}

:where(.dark) .fi-storage-ring-free {
    fill: var(--std-color-success-400);
}

.fi-storage-ring-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    pointer-events: none;
}

.fi-storage-ring-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-storage-ring-total {
    color: var(--std-color-color-white);
}

.fi-storage-ring-caption {
    font-size: 0.6875rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-storage-ring-caption {
    color: var(--std-color-gray-400);
}

.fi-storage-ring-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem 1rem;
    flex: 1 1 9rem;
}

.fi-storage-ring-figure {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* ── Comparing the storages (بند ۱۱ … ۱۳) ─────────────────────────────────── */

.fi-storage-compare {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    overflow-x: auto;
}

.fi-storage-compare-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    width: 9rem;
}

.fi-storage-compare-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--std-color-gray-600);
}

:where(.dark) .fi-storage-compare-value {
    color: var(--std-color-gray-300);
}

.fi-storage-compare-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 9rem;
    border-radius: 0.375rem;
    background-color: var(--std-color-mix-gray-400-10);
}

.fi-storage-compare-bar {
    width: 100%;
    min-height: 0.25rem;
    border-radius: 0.375rem;
    background-color: var(--std-color-success-600);
}

:where(.dark) .fi-storage-compare-bar {
    background-color: var(--std-color-success-400);
}

.fi-storage-compare-low_space,
.fi-storage-compare-unreachable,
:where(.dark) .fi-storage-compare-low_space,
:where(.dark) .fi-storage-compare-unreachable {
    background-color: var(--std-color-danger-400);
}

.fi-storage-compare-capacity_unknown,
:where(.dark) .fi-storage-compare-capacity_unknown {
    background-color: var(--std-color-warning-500);
}

.fi-storage-compare-unmeasured,
:where(.dark) .fi-storage-compare-unmeasured {
    background-color: var(--std-color-gray-400);
}

.fi-storage-compare-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-storage-compare-label {
    color: var(--std-color-gray-100);
}

.fi-storage-compare-sub {
    font-size: 0.6875rem;
    text-align: center;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-storage-compare-sub {
    color: var(--std-color-gray-400);
}

/* ── The trend over time (بند ۸ … ۱۰ و ۱۹) ────────────────────────────────── */

.fi-storage-trend-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fi-storage-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fi-storage-range {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--std-color-gray-700);
    cursor: pointer;
}

:where(.dark) .fi-storage-range {
    border-color: var(--std-color-gray-700);
    color: var(--std-color-gray-300);
}

.fi-storage-range-on {
    border-color: var(--std-color-warning-500);
    background-color: var(--std-color-mix-warning-400-10);
    color: var(--std-color-warning-600);
}

:where(.dark) .fi-storage-range-on {
    color: var(--std-color-warning-400);
}

.fi-storage-trend {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-block-start: 0.5rem;
}

/* The plot and its points share one box: the polylines are stretched to it and
   the round dots are laid over it, so the dots stay round however wide the panel
   is — and, because the dots are positioned against this box rather than nudged
   with a negative margin, a dot cannot drift off its own line when the column's
   spacing changes. */
.fi-storage-trend-canvas {
    position: relative;
    width: 100%;
    height: 9rem;
}

.fi-storage-trend-plot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    background-color: var(--std-color-mix-gray-400-10);
}

.fi-storage-trend-points {
    position: absolute;
    inset: 0;
}

.fi-storage-trend-used {
    fill: none;
    stroke: var(--std-color-danger-600);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

:where(.dark) .fi-storage-trend-used {
    stroke: var(--std-color-danger-400);
}

/* بند ۱۹: the capacity line, so a capacity that grew is not read as consumption
   that fell. Dashed and pale, because it is the ceiling rather than the story. */
.fi-storage-trend-total {
    fill: none;
    stroke: var(--std-color-gray-500);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

:where(.dark) .fi-storage-trend-total {
    stroke: var(--std-color-gray-300);
}

.fi-storage-trend-point {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    margin: -0.25rem;
    border-radius: 9999px;
    background-color: var(--std-color-danger-600);
}

:where(.dark) .fi-storage-trend-point {
    background-color: var(--std-color-danger-400);
}

.fi-storage-trend-point:hover {
    outline: 2px solid var(--std-color-warning-500);
    outline-offset: 1px;
}