/* Product statistics screen.  The chart is native SVG, so it stays light on mobile. */
.statisticsView { background: linear-gradient(155deg, #fffdf7, #f4f8ef); }
.statisticsHead { display: flex; align-items: center; gap: 11px; }
.statisticsHead > div { position: relative; }
.statisticsPeriod { display: inline-flex; margin-top: 20px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.66); }
.statisticsPeriod button { padding: 8px 12px; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 900; }
.statisticsPeriod button.active { color: #fff; background: var(--deep); box-shadow: 0 5px 12px rgba(14,123,67,.22); }
.statisticsUpdated { min-height: 18px; margin: 13px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.statisticsCards { display: grid; gap: 12px; }
.statisticsCard { position: relative; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 11px 25px rgba(11,21,16,.06); }
.statisticsCardHead { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.statisticsCardHead h3 { margin: 0; font-size: 17px; letter-spacing: -.03em; }
.statisticsCardHead p { margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.statisticsChart { display: block; width: 100%; min-height: 400px; height: 400px; margin-top: 10px; overflow: visible; }
.statisticsChart .grid { stroke: rgba(11,21,16,.1); stroke-width: 1; }
.statisticsChart polyline.line { fill: none !important; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.statisticsChart .dot { cursor: pointer; stroke: #fffdf7; stroke-width: 1; transition: r .16s ease; }
.statisticsChart .dot:hover, .statisticsChart .dot:focus { r: 3; outline: none; }
.statisticsChart .line.expenses, .statisticsChart .dot.expenses { stroke: #183b73; fill: #183b73; }
.statisticsChart .line.saved, .statisticsChart .dot.saved { stroke: #0a9f65; fill: #0a9f65; }
.statisticsChart .line.spoiled, .statisticsChart .dot.spoiled { stroke: #d24b4b; fill: #d24b4b; }
.statisticsChart .statisticsCrosshair { stroke: rgba(11,21,16,.42); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.statisticsAxis { display: flex; justify-content: space-between; gap: 8px; min-height: 15px; color: var(--muted); font-size: 9px; font-weight: 800; }
.statisticsAxis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statisticsAxis span:last-child { text-align: right; }
.statisticsEmpty { margin: 8px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.statisticsLegend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.statisticsLegend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.statisticsLegend i { display: inline-block; width: 18px; height: 3px; border-radius: 99px; background: currentColor; }
.statisticsLegend span.expenses { color: #183b73; }
.statisticsLegend span.saved { color: #0a9f65; }
.statisticsLegend span.spoiled { color: #d24b4b; }
.statisticsLegend b { color: var(--ink); }
.statisticsTooltip { position: absolute; z-index: 2; min-width: 210px; padding: 10px 12px; border-radius: 10px; color: #fff; background: #153b27; box-shadow: 0 8px 20px rgba(11,21,16,.2); font-size: 11px; font-weight: 800; line-height: 1.35; pointer-events: none; transform: translate(-50%, calc(-100% - 9px)); }
.statisticsTooltip > b { display: block; margin-bottom: 6px; font-size: 12px; }
.statisticsTooltip span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; }
.statisticsTooltip span i { width: 8px; height: 2px; border-radius: 99px; background: currentColor; }
.statisticsTooltip span strong { color: #fff; }
.statisticsTooltip span.expenses { color: #aac5ff; }
.statisticsTooltip span.saved { color: #75e4b1; }
.statisticsTooltip span.spoiled { color: #ff9999; }
.statisticsTooltip[hidden] { display: none; }
body.desktop-mode #statisticsView.active {
    display: block !important;
    max-width: none;
    overflow-y: auto;
    background: radial-gradient(circle at 94% 8%, rgba(183, 255, 106, .25), transparent 28%),
    radial-gradient(circle at 6% 80%, rgba(32, 196, 111, .12), transparent 26%),
    #f6f0e5;
}
body.desktop-mode .statisticsHead .fridgeBack { display: grid; place-items: center; }
body.desktop-mode .statisticsHead .title { font-size: 52px; }
body.desktop-mode .statisticsHead .subtitle { font-size: 15px; }
body.desktop-mode .statisticsCards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.desktop-mode .statisticsChart { min-height: 400px; height: 400px; }
@media (max-width: 380px) { .statisticsCard { padding: 13px; } .statisticsPeriod button { padding: 8px 9px; } }