/* Сверка к перечислению (ae009).
 *
 * Классы и токены — по образцу моста финансового результата (ae008) и
 * каскада закрытия дня; общие классы (`filter-panel`, `form__*`, `table*`,
 * `badge*`, `button*`) сверены с темами контура. */

.ae009-page .ae009-shell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.ae009-page .ae009-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ae009-page .ae009-title {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.ae009-page .ae009-note,
.ae009-page .ae009-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ae009-page .ae009-note {
    max-width: 100ch;
}

.ae009-page .ae009-note--error {
    color: var(--color-error, var(--color-text-primary));
}

.ae009-page .ae009-filters {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
}

.ae009-page .ae009-cabinet {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ae009-page .ae009-cabinet__title {
    margin: 0;
    font-size: var(--font-size-md, var(--font-size-lg));
    color: var(--color-text-primary);
}

/* Итог по закрытым периодам: колонки задаёт контейнер, не окно. */
.ae009-page .ae009-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--spacing-md);
}

.ae009-page .ae009-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.ae009-page .ae009-table {
    overflow-x: auto;
}

.ae009-page .ae009-table .table__cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: top;
}

.ae009-page .ae009-table .ae009-num {
    text-align: right;
}

/* График: столбики периода и линия накопленной разницы под ними. Ширина —
   по числу периодов, длинный ряд прокручивается, а не сжимается. */
.ae009-page .ae009-chart {
    width: 100%;
    overflow-x: auto;
}

.ae009-page .ae009-chart__svg {
    display: block;
    height: 340px;
    width: auto;
    max-width: none;
}

.ae009-page .ae009-chart__legend {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ae009-page .ae009-chart__key::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.ae009-page .ae009-chart__key--days::before {
    background: var(--color-primary);
}

.ae009-page .ae009-chart__key--document::before {
    background: var(--color-success);
}

.ae009-page .ae009-chart__key--line::before {
    height: 2px;
    background: var(--color-warning, var(--color-error));
}

.ae009-page .ae009-chart__bar--days {
    fill: var(--color-primary);
}

.ae009-page .ae009-chart__bar--document {
    fill: var(--color-success);
}

.ae009-page .ae009-chart__bar--pending {
    opacity: 0.35;
}

.ae009-page .ae009-chart__zero {
    stroke: var(--color-border);
    stroke-width: 1;
}

.ae009-page .ae009-chart__line {
    fill: none;
    stroke: var(--color-warning, var(--color-error));
    stroke-width: 2;
}

.ae009-page .ae009-chart__dot {
    fill: var(--color-warning, var(--color-error));
}

.ae009-page .ae009-chart__value {
    font-size: 11px;
    fill: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ae009-page .ae009-chart__label {
    font-size: 11px;
    fill: var(--color-text-tertiary);
}