From 0bc2725d4d617476a7b3eb60f95bf62d8c3709a4 Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Fri, 30 Jan 2026 22:29:27 +0300
Subject: [PATCH] =?UTF-8?q?Use=20system=20font=20with=20proper=20=E2=82=BD?=
 =?UTF-8?q?=20symbol=20and=20fix=20modal=20close=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switch to SF Pro / system font stack for consistent ₽ rendering
- Apply font to both HTML and ECharts center text
- Reset chart highlight and details panel when closing modal

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app.js     | 8 +++++++-
 styles.css | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index c821b3e..9a416c9 100644
--- a/app.js
+++ b/app.js
@@ -3,6 +3,7 @@ const chartDom = document.getElementById('chart-container');
 const myChart = echarts.init(chartDom);
 let option;
 let originalSunburstData = null; // Stores the original data for the current month (for reset on center click)
+let showDefaultView = null; // Reference to reset details panel to default view
 
 // Drill-down history for back/forward navigation
 let drillDownHistory = [];
@@ -686,6 +687,7 @@ function renderChart(data) {
                     z: 100,
                     style: {
                         text: russianMonth + '\n' + sunburstData.total.toFixed(0).toLocaleString() + ' ₽',
+                        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
                         fontWeight: 'bold',
                         fontSize: 18,
                         textAlign: 'left',
@@ -1621,7 +1623,8 @@ function setupHoverEvents(sunburstData, contextName = null) {
     }
 
     // Show the default view with top categories
-    function showDefaultView() {
+    // Assign to global so it can be called from closeTransactionModal
+    showDefaultView = function() {
         // Use context name (drilled-down sector) if provided, otherwise use month name
         const selectedMonth = document.getElementById('month-select').value;
         const monthName = getRussianMonthName(selectedMonth);
@@ -2075,6 +2078,9 @@ function setupRowDetailModalListeners() {
 function closeTransactionModal() {
     const modal = document.getElementById('transaction-modal');
     modal.style.display = 'none';
+    // Remove any chart highlight and reset details panel
+    myChart.dispatchAction({ type: 'downplay' });
+    if (showDefaultView) showDefaultView();
 }
 
 // Global escape key handler for all modals
diff --git a/styles.css b/styles.css
index 4784c39..3f8bb2f 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,7 @@
 }
 
 body {
-    font-family: Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     background-color: #f5f5f5;
     color: #333;
 }