/* Reports page - B60 OS (page-scoped) */

.reports-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-6);
}

.reports-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
}

.reports-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ds-space-4);
}

.reports-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-6);
}

.reports-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin-block-end: var(--ds-space-4);
}

.reports-section-title {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-semibold);
}

/* Indigo bar chart */
.reports-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--ds-space-2);
    min-height: 180px;
    padding: var(--ds-space-4) var(--ds-space-2);
}

.reports-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
}

.reports-bar-value {
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.reports-bar-fill {
    width: 100%;
    max-width: 48px;
    min-height: 4px;
    background: var(--ds-primary);
    border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
    transition: height var(--ds-motion-panel) var(--ds-ease-standard);
}

.reports-bar-label {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Payment donut - semantic palette */
.reports-donut-wrap {
    display: flex;
    align-items: center;
    gap: var(--ds-space-6);
    flex-wrap: wrap;
}

.reports-donut-legend {
    flex: 1;
    min-width: 160px;
}

.reports-legend-item {
    margin-block-end: var(--ds-space-4);
}

.reports-legend-head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin-block-end: var(--ds-space-1);
    text-transform: capitalize;
}

.reports-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: var(--ds-radius-sm);
    flex-shrink: 0;
}

.reports-legend-swatch.is-cash { background: var(--ds-success); }
.reports-legend-swatch.is-card { background: var(--ds-info); }
.reports-legend-swatch.is-wallet { background: var(--ds-primary); }
.reports-legend-swatch.is-transfer { background: var(--ds-warning); }
.reports-legend-swatch.is-debt { background: var(--ds-danger); }
.reports-legend-swatch.is-other { background: var(--ds-text-tertiary); }

.reports-legend-amount {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-semibold);
    font-family: var(--ds-font-mono);
    font-variant-numeric: tabular-nums;
}

.reports-legend-pct {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

.reports-donut-svg {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.reports-donut-track {
    fill: none;
    stroke: var(--ds-bg-inset);
    stroke-width: 3;
}

/* Top products list */
.reports-rank-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.reports-rank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
}

.reports-rank-left {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
}

.reports-rank-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-border);
    color: var(--ds-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    flex-shrink: 0;
}

.reports-rank-num.is-first {
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.reports-rank-name {
    font-weight: var(--ds-fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reports-rank-right {
    text-align: end;
    flex-shrink: 0;
}

.reports-rank-revenue {
    font-weight: var(--ds-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.reports-rank-qty {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

/* Category progress bars */
.reports-cat-row {
    margin-block-end: var(--ds-space-4);
}

.reports-cat-head {
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--ds-space-1);
    font-size: var(--ds-text-sm);
}

.reports-cat-track {
    height: 8px;
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
}

.reports-cat-fill {
    height: 100%;
    background: var(--ds-primary);
    border-radius: var(--ds-radius-sm);
}

.reports-cat-meta {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    margin-block-start: 2px;
}

.reports-shift-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ds-space-3);
}

.reports-shift-stat {
    text-align: center;
    padding: var(--ds-space-4);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
}

.reports-shift-stat-value {
    font-size: var(--ds-text-xl);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
}

.reports-shift-stat-label {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    margin-block-start: var(--ds-space-1);
}

.reports-audit-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.reports-cross-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
}

.reports-cross-cell {
    background: var(--ds-bg-inset);
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
}

.reports-cross-cell-title {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    margin-block-end: 6px;
}

@media (max-width: 768px) {
    .reports-stat-grid,
    .reports-grid-2,
    .reports-shift-stats,
    .reports-cross-grid {
        grid-template-columns: 1fr;
    }

    .reports-donut-wrap {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reports-bar-fill {
        transition: none;
    }
}