rearrange the download modal

webui/static/mobile.css

@@ -1115,7 +1115,7 @@
 
     /* Download stats grid */
     .download-dashboard-stats {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(4, 1fr);
         gap: 8px;
         padding: 12px;
     }

webui/static/script.js

@@ -5571,6 +5571,24 @@ function generateDownloadModalHeroSection(context) {
         <div class="download-missing-modal-hero">
             ${heroBackgroundImage}
             ${heroContent}
+            <div class="download-dashboard-stats">
+                <div class="dashboard-stat stat-total">
+                    <div class="dashboard-stat-number" id="stat-total-${context.playlistId}">${context.trackCount}</div>
+                    <div class="dashboard-stat-label">Total</div>
+                </div>
+                <div class="dashboard-stat stat-found">
+                    <div class="dashboard-stat-number" id="stat-found-${context.playlistId}">-</div>
+                    <div class="dashboard-stat-label">Found</div>
+                </div>
+                <div class="dashboard-stat stat-missing">
+                    <div class="dashboard-stat-number" id="stat-missing-${context.playlistId}">-</div>
+                    <div class="dashboard-stat-label">Missing</div>
+                </div>
+                <div class="dashboard-stat stat-downloaded">
+                    <div class="dashboard-stat-number" id="stat-downloaded-${context.playlistId}">0</div>
+                    <div class="dashboard-stat-label">Downloaded</div>
+                </div>
+            </div>
         </div>
         <div class="download-missing-modal-header-actions">
             <span class="download-missing-modal-close" onclick="closeDownloadMissingModal('${context.playlistId || 'unknown'}')">&times;</span>
@@ -5657,27 +5675,8 @@ async function openDownloadMissingModal(playlistId) {
             <div class="download-missing-modal-header">
                 ${generateDownloadModalHeroSection(heroContext)}
             </div>
-            
+
             <div class="download-missing-modal-body">
-                <div class="download-dashboard-stats">
-                    <div class="dashboard-stat stat-total">
-                        <div class="dashboard-stat-number" id="stat-total-${playlistId}">${tracks.length}</div>
-                        <div class="dashboard-stat-label">Total Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-found">
-                        <div class="dashboard-stat-number" id="stat-found-${playlistId}">-</div>
-                        <div class="dashboard-stat-label">Found in Library</div>
-                    </div>
-                    <div class="dashboard-stat stat-missing">
-                        <div class="dashboard-stat-number" id="stat-missing-${playlistId}">-</div>
-                        <div class="dashboard-stat-label">Missing Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-downloaded">
-                        <div class="dashboard-stat-number" id="stat-downloaded-${playlistId}">0</div>
-                        <div class="dashboard-stat-label">Downloaded</div>
-                    </div>
-                </div>
-                
                 <div class="download-progress-section">
                     <div class="progress-item">
                         <div class="progress-label">
@@ -6034,27 +6033,8 @@ async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistNam
             <div class="download-missing-modal-header">
                 ${generateDownloadModalHeroSection(heroContext)}
             </div>
-            
+
             <div class="download-missing-modal-body">
-                <div class="download-dashboard-stats">
-                    <div class="dashboard-stat stat-total">
-                        <div class="dashboard-stat-number" id="stat-total-${virtualPlaylistId}">${spotifyTracks.length}</div>
-                        <div class="dashboard-stat-label">Total Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-found">
-                        <div class="dashboard-stat-number" id="stat-found-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Found in Library</div>
-                    </div>
-                    <div class="dashboard-stat stat-missing">
-                        <div class="dashboard-stat-number" id="stat-missing-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Missing Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-downloaded">
-                        <div class="dashboard-stat-number" id="stat-downloaded-${virtualPlaylistId}">0</div>
-                        <div class="dashboard-stat-label">Downloaded</div>
-                    </div>
-                </div>
-                
                 <div class="download-progress-section">
                     <div class="progress-item">
                         <div class="progress-label">
@@ -7262,27 +7242,8 @@ async function openDownloadMissingWishlistModal(category = null) {
             <div class="download-missing-modal-header">
                 ${generateDownloadModalHeroSection(heroContext)}
             </div>
-            
+
             <div class="download-missing-modal-body">
-                <div class="download-dashboard-stats">
-                    <div class="dashboard-stat stat-total">
-                        <div class="dashboard-stat-number" id="stat-total-${playlistId}">${tracks.length}</div>
-                        <div class="dashboard-stat-label">Total Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-found">
-                        <div class="dashboard-stat-number" id="stat-found-${playlistId}">-</div>
-                        <div class="dashboard-stat-label">Found in Library</div>
-                    </div>
-                    <div class="dashboard-stat stat-missing">
-                        <div class="dashboard-stat-number" id="stat-missing-${playlistId}">-</div>
-                        <div class="dashboard-stat-label">Missing Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-downloaded">
-                        <div class="dashboard-stat-number" id="stat-downloaded-${playlistId}">0</div>
-                        <div class="dashboard-stat-label">Downloaded</div>
-                    </div>
-                </div>
-                
                 <div class="download-progress-section">
                     <div class="progress-item">
                         <div class="progress-label">
@@ -14941,27 +14902,8 @@ async function openDownloadMissingModalForTidal(virtualPlaylistId, playlistName,
             <div class="download-missing-modal-header">
                 ${generateDownloadModalHeroSection(heroContext)}
             </div>
-            
+
             <div class="download-missing-modal-body">
-                <div class="download-dashboard-stats">
-                    <div class="dashboard-stat stat-total">
-                        <div class="dashboard-stat-number" id="stat-total-${virtualPlaylistId}">${spotifyTracks.length}</div>
-                        <div class="dashboard-stat-label">Total Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-found">
-                        <div class="dashboard-stat-number" id="stat-found-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Found in Library</div>
-                    </div>
-                    <div class="dashboard-stat stat-missing">
-                        <div class="dashboard-stat-number" id="stat-missing-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Missing Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-downloaded">
-                        <div class="dashboard-stat-number" id="stat-downloaded-${virtualPlaylistId}">0</div>
-                        <div class="dashboard-stat-label">Downloaded</div>
-                    </div>
-                </div>
-                
                 <div class="download-progress-section">
                     <div class="progress-item">
                         <div class="progress-label">
@@ -22051,27 +21993,8 @@ async function openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlis
             <div class="download-missing-modal-header">
                 ${generateDownloadModalHeroSection(heroContext)}
             </div>
-            
+
             <div class="download-missing-modal-body">
-                <div class="download-dashboard-stats">
-                    <div class="dashboard-stat stat-total">
-                        <div class="dashboard-stat-number" id="stat-total-${virtualPlaylistId}">${spotifyTracks.length}</div>
-                        <div class="dashboard-stat-label">Total Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-found">
-                        <div class="dashboard-stat-number" id="stat-found-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Found in Library</div>
-                    </div>
-                    <div class="dashboard-stat stat-missing">
-                        <div class="dashboard-stat-number" id="stat-missing-${virtualPlaylistId}">-</div>
-                        <div class="dashboard-stat-label">Missing Tracks</div>
-                    </div>
-                    <div class="dashboard-stat stat-downloaded">
-                        <div class="dashboard-stat-number" id="stat-downloaded-${virtualPlaylistId}">0</div>
-                        <div class="dashboard-stat-label">Downloaded</div>
-                    </div>
-                </div>
-                
                 <div class="download-progress-section">
                     <div class="progress-item">
                         <div class="progress-label">

webui/static/style.css

@@ -9906,11 +9906,6 @@ body {
         max-width: 1000px;
     }
 
-    .download-dashboard-stats {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 20px;
-    }
-
     .download-missing-modal-hero {
         min-height: 100px;
         padding: 20px 24px;
@@ -10003,17 +9998,12 @@ body {
     }
 
     .download-dashboard-stats {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(4, 1fr);
-        gap: 16px;
+        gap: 4px;
-        padding: 20px;
+        width: 100%;
-    }
+        padding: 8px 0 0 0;
-
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
-    .dashboard-stat-number {
+        margin-top: 8px;
-        font-size: 28px;
-    }
-
-    .dashboard-stat-label {
-        font-size: 12px;
     }
 
     .download-missing-modal-footer {
@@ -10040,11 +10030,6 @@ body {
         max-height: 95vh;
     }
 
-    .download-dashboard-stats {
-        padding: 16px;
-        gap: 16px;
-    }
-
     .download-progress-section {
         padding: 16px;
     }
@@ -10072,21 +10057,6 @@ body {
         padding: 12px 20px;
     }
 
-    .download-dashboard-stats {
-        padding: 12px;
-        gap: 12px;
-        grid-template-columns: repeat(2, 1fr);
-        /* 2 columns on very small heights */
-    }
-
-    .dashboard-stat-number {
-        font-size: 24px;
-    }
-
-    .dashboard-stat-label {
-        font-size: 11px;
-    }
-
     .download-progress-section {
         padding: 12px;
         gap: 10px;
@@ -10161,56 +10131,49 @@ body {
     overflow-x: hidden;
 }
 
-/* Dashboard Stats Section */
+/* Dashboard Stats Section — sits inside hero header, 2x2 grid */
 .download-dashboard-stats {
-    /* Premium glassmorphic card */
-    background: linear-gradient(135deg,
-            rgba(35, 35, 35, 0.7) 0%,
-            rgba(25, 25, 25, 0.8) 100%);
-    backdrop-filter: blur(10px) saturate(1.1);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-top: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 12px;
-    padding: 12px 16px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
+    gap: 4px 16px;
-
+    flex-shrink: 0;
-    /* Premium shadow with subtle glow */
+    position: relative;
-    box-shadow:
+    z-index: 2;
-        0 8px 32px rgba(0, 0, 0, 0.4),
+    padding: 0;
-        0 4px 16px rgba(0, 0, 0, 0.2),
+    background: none;
-        0 0 20px rgba(29, 185, 84, 0.08),
+    backdrop-filter: none;
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
 }
 
 .dashboard-stat {
     text-align: center;
-    padding: 4px;
+    padding: 2px 8px;
-    border-radius: 10px;
+    border-radius: 8px;
     transition: all 0.3s ease;
 }
 
 .dashboard-stat:hover {
     background: rgba(255, 255, 255, 0.05);
-    transform: translateY(-2px);
 }
 
 .dashboard-stat-number {
-    font-size: 22px;
+    font-size: 18px;
     font-weight: 700;
-    margin-bottom: 2px;
+    margin-bottom: 0;
+    line-height: 1.2;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
 }
 
 .dashboard-stat-label {
-    font-size: 11px;
+    font-size: 10px;
     color: #e0e0e0;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    opacity: 0.9;
+    opacity: 0.8;
 }
 
 /* Enhanced stat colors with glow effects */