Better mobile support for the dashboard

templates/base.html

@@ -27,8 +27,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #1a1a2e; color: #e0e0e0; }
         .container { max-width: 1452px; margin: 0 auto; padding: 20px; }
         .header { background: #16213e; color: white; padding: 20px 0; margin-bottom: 30px; border-bottom: 2px solid #0f3460; }
-        .header h1 { font-size: 24px; font-weight: 600; display: inline-block; }
-        .header-actions { float: right; }
+        .header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
+        .header h1 { font-size: 24px; font-weight: 600; }
+        .header-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
         .nav { background: #16213e; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); display: flex; flex-wrap: wrap; gap: 10px; }
         .nav a { color: #a0a0a0; text-decoration: none; padding: 8px 12px; border-radius: 4px; flex-shrink: 0; }
         .nav a:hover { background: #0f3460; color: #e0e0e0; }
@@ -131,6 +132,35 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             0% { background-position: 0% center; }
             100% { background-position: 400% center; }
         }
+
+        /* ── Mobile responsive ── */
+        @media (max-width: 768px) {
+            .container { padding: 8px; }
+            .header { padding: 12px 0; margin-bottom: 12px; }
+            .header h1 { font-size: 18px; }
+            .header-actions { margin-top: 6px; }
+            .header-actions .btn { padding: 6px 10px; font-size: 12px; margin-left: 0; }
+            .nav { padding: 8px; gap: 6px; }
+            .nav a { padding: 6px 8px; font-size: 13px; }
+            .content { padding: 14px; }
+            table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+            th, td { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
+            .btn { padding: 8px 12px; font-size: 13px; }
+            .form-group input, .form-group textarea, .form-group select { font-size: 16px; /* prevent iOS zoom */ }
+            .notif-dropdown { min-width: 280px; max-width: calc(100vw - 16px); right: -60px; }
+            .account-dropdown { min-width: 160px; }
+            .donate-modal-content, .ui-modal-box { width: 96%; padding: 18px; }
+            /* Collapse any 2-column inline-style grids */
+            [style*="grid-template-columns: 1fr 1fr"],
+            [style*="grid-template-columns: repeat(auto-fit, minmax(4"] {
+                grid-template-columns: 1fr !important;
+            }
+        }
+        @media (max-width: 480px) {
+            .header-actions .btn { font-size: 11px; padding: 5px 8px; }
+            .nav a { font-size: 12px; padding: 5px 7px; }
+            .content { padding: 10px; }
+        }
     </style>
     <script>
         /*

templates/dashboard/admin_payment_settings.html

@@ -942,7 +942,7 @@ function showToast(message, type) {
         transform: translateX(-50%);
         z-index: 10000;
         min-width: 400px;
-        max-width: 600px;
+        max-width: calc(100vw - 16px);
         padding: 20px 30px;
         border-radius: 8px;
         box-shadow: 0 4px 20px rgba(0,0,0,0.3);

templates/dashboard/cache_settings.html

@@ -116,13 +116,8 @@ function showToast(message, type) {
         transform: translateX(-50%);
         z-index: 10000;
         min-width: 400px;
+        max-width: calc(100vw - 16px);
         padding: 20px 30px;
-        border-radius: 8px;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-        font-size: 16px;
-        font-weight: 500;
-        text-align: center;
-        animation: slideDown 0.3s ease-out;
         ${type === 'success' ? 'background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color: white; border: 2px solid #27ae60;' : ''}
         ${type === 'danger' ? 'background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; border: 2px solid #e74c3c;' : ''}
         ${type === 'warning' ? 'background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; border: 2px solid #f39c12;' : ''}

templates/dashboard/user_index.html

@@ -99,6 +99,7 @@
     margin-bottom: 1.75rem;
 }
 @media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
+@media (max-width: 600px) { .actions-grid { grid-template-columns: 1fr; } }
 
 /* ── Section card ───────────────────────────────────────────── */
 .section-card {

templates/dashboard/user_providers.html

@@ -206,13 +206,8 @@ function showToast(message, type) {
         transform: translateX(-50%);
         z-index: 10000;
         min-width: 400px;
+        max-width: calc(100vw - 16px);
         padding: 20px 30px;
-        border-radius: 8px;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-        font-size: 16px;
-        font-weight: 500;
-        text-align: center;
-        animation: slideDown 0.3s ease-out;
         ${type === 'success' ? 'background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color: white; border: 2px solid #27ae60;' : ''}
         ${type === 'danger' ? 'background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; border: 2px solid #e74c3c;' : ''}
         ${type === 'warning' ? 'background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; border: 2px solid #f39c12;' : ''}