Position download button in corner + better Arabic font

- Move export button outside header-actions to enable absolute positioning
- Button now positioned at top-right (LTR) / top-left (RTL)
- Switch from Tajawal to IBM Plex Sans Arabic (slicker, more technical)
- Add RTL-specific font-family in CSS

public/index.html

@@ -17,7 +17,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -38,6 +38,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* RTL Arabic font */
+html[dir="rtl"] body,
+html[dir="rtl"] {
+  font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
 /* Loading & Error */
 .loading-container,
 .error-container {
@@ -1861,6 +1867,7 @@ table tbody tr:hover {
 
 /* Chart Export Button & Header */
 .exportable-chart-wrapper {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1872,7 +1879,12 @@ table tbody tr:hover {
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 16px;
-  flex-wrap: wrap;
+  padding-right: 44px; /* Space for absolute download button */
+}
+
+html[dir="rtl"] .chart-header-with-export {
+  padding-right: 0;
+  padding-left: 44px;
 }
 
 .chart-header-with-export h2 {
@@ -1881,6 +1893,7 @@ table tbody tr:hover {
   font-weight: 600;
   color: var(--text-primary);
   line-height: 1.4;
+  flex-shrink: 0;
 }
 
 .chart-header-actions {
@@ -1896,7 +1909,14 @@ table tbody tr:hover {
   min-height: 0;
 }
 
-.chart-export-btn {
+/* Download button - always top corner, outside normal flow */
+.chart-export-btn,
+.chart-export-btn.visible {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  z-index: 10;
   width: 32px;
   height: 32px;
   min-width: 32px;
@@ -1909,10 +1929,17 @@ table tbody tr:hover {
   justify-content: center;
   color: var(--text-muted);
   transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+
+html[dir="rtl"] .chart-export-btn,
+html[dir="rtl"] .chart-export-btn.visible {
+  right: auto !important;
+  left: 0 !important;
 }
 
 .chart-export-btn:hover {
-  background: var(--bg-tertiary);
+  background: var(--border);
   color: var(--text-primary);
 }
 

src/components/ChartExport.js

@@ -46,11 +46,7 @@ export function ExportableChart({ children, filename = 'chart', title = '', clas
 
   return (
     <div className="exportable-chart-wrapper">
-      {title && (
-        <div className="chart-header-with-export">
-          <h2>{title}</h2>
-          <div className="chart-header-actions">
-            {controls}
+      {/* Download button - positioned absolutely in corner */}
       <button 
         className="chart-export-btn visible" 
         onClick={exportAsPNG}
@@ -62,7 +58,10 @@ export function ExportableChart({ children, filename = 'chart', title = '', clas
           <line x1="12" y1="15" x2="12" y2="3"/>
         </svg>
       </button>
-          </div>
+      {title && (
+        <div className="chart-header-with-export">
+          <h2>{title}</h2>
+          {controls && <div className="chart-header-actions">{controls}</div>}
         </div>
       )}
       {!title && controls && <div className="chart-controls">{controls}</div>}