fix(dashboard): improve responsive design and dark mode contrast

dashboard/src/index.css

@@ -359,3 +359,56 @@ code {
   left: 1rem;
 }
 
+/* Mobile Responsive - Global */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .modal {
+    width: 95%;
+    max-width: none;
+    margin: 1rem;
+    border-radius: 12px;
+  }
+
+  .modal-header {
+    padding: 1.25rem 1.25rem 0.875rem;
+  }
+
+  .modal-header h2 {
+    font-size: 1.125rem;
+  }
+
+  .modal-body {
+    padding: 1.25rem;
+  }
+
+  .modal-footer {
+    padding: 0.875rem 1.25rem 1.25rem;
+  }
+
+  select {
+    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.25rem;
+  }
+
+  .modal-overlay {
+    align-items: flex-end;
+  }
+
+  .modal {
+    width: 100%;
+    margin: 0;
+    border-radius: 16px 16px 0 0;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+}
+

dashboard/src/pages/Dashboard.css

@@ -286,16 +286,77 @@
     gap: 1rem;
   }
 
-  .table-header,
-  .table-row {
-    grid-template-columns: 1fr 1fr 1fr;
-    font-size: 0.8125rem;
+  .stat-value {
+    font-size: 1.5rem;
   }
 
-  .table-header span:nth-child(4),
-  .table-header span:nth-child(5),
-  .table-row > *:nth-child(4),
-  .table-row > *:nth-child(5) {
+  .sessions-section {
+    padding: 1rem;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  /* Convert table to card layout on mobile */
+  .sessions-table .table-header {
     display: none;
   }
+
+  .sessions-table .table-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sessions-table .table-row:last-child {
+    border-bottom: none;
+  }
+
+  .session-info-cell {
+    order: 1;
+  }
+
+  .session-id {
+    font-size: 0.9375rem;
+    font-weight: 600;
+  }
+
+  .phone {
+    order: 2;
+  }
+
+  .status-pill {
+    order: 3;
+  }
+
+  .last-active {
+    order: 4;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+
+  .actions {
+    order: 5;
+    justify-content: flex-start;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border);
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard {
+    padding: 0.75rem;
+  }
+
+  .header-title {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
 }

dashboard/src/pages/Infrastructure.css

@@ -567,3 +567,57 @@
     justify-content: center;
   }
 }
+
+@media (max-width: 768px) {
+  .infrastructure-page {
+    padding: 0.75rem;
+  }
+
+  .infra-card {
+    padding: 1rem;
+  }
+
+  .form-row .form-group.small {
+    max-width: none;
+  }
+
+  .form-group input,
+  .form-group select {
+    font-size: 0.875rem;
+    padding: 0.625rem 0.875rem;
+  }
+
+  .migration-item {
+    grid-template-columns: 24px 1fr;
+    gap: 0.5rem;
+  }
+
+  .migration-date {
+    grid-column: 2;
+  }
+
+  .migration-actions {
+    flex-direction: column;
+  }
+
+  .migration-actions button {
+    justify-content: center;
+  }
+
+  .stat-values {
+    gap: 1rem;
+  }
+
+  .stat-item .value {
+    font-size: 1rem;
+  }
+
+  .page-footer {
+    justify-content: stretch;
+  }
+
+  .page-footer button {
+    width: 100%;
+    justify-content: center;
+  }
+}

dashboard/src/pages/Login.css

@@ -189,3 +189,43 @@
 .login-footer a:hover {
   color: var(--text-secondary);
 }
+
+/* Mobile Responsive */
+@media (max-width: 480px) {
+  .login-container {
+    padding: 1rem;
+  }
+
+  .login-card {
+    padding: 2rem 1.5rem;
+    border-radius: 10px;
+  }
+
+  .logo-icon {
+    width: 80px;
+    height: 80px;
+  }
+
+  .login-title {
+    font-size: 1.375rem;
+  }
+
+  .login-subtitle {
+    font-size: 0.875rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .input-wrapper input {
+    padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+    font-size: 0.9375rem;
+  }
+
+  .connect-btn {
+    padding: 0.75rem 1.25rem;
+    font-size: 0.9375rem;
+  }
+
+  .login-help {
+    font-size: 0.8125rem;
+  }
+}

dashboard/src/pages/MessageTester.css

@@ -220,3 +220,45 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 768px) {
+  .message-tester {
+    padding: 1rem;
+  }
+
+  .compose-panel,
+  .response-panel {
+    padding: 1rem;
+  }
+
+  .toggle-group {
+    flex-wrap: wrap;
+    border: none;
+    gap: 0.5rem;
+    overflow: visible;
+  }
+
+  .toggle-group button {
+    min-width: 0;
+    padding: 0.5rem 0.875rem;
+    font-size: 0.8125rem;
+    border: 1px solid var(--border) !important;
+    border-radius: 6px;
+  }
+
+  .toggle-group button.active {
+    border-color: var(--primary) !important;
+  }
+
+  .send-btn {
+    font-size: 0.9375rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .form-group input,
+  .form-group select,
+  .form-group textarea {
+    font-size: 0.875rem;
+    padding: 0.625rem 0.75rem;
+  }
+}

dashboard/src/pages/Plugins.tsx

@@ -178,14 +178,11 @@ export default function Plugins() {
           <div className="engine-features">
             <p className="features-label">{t('plugins.supportedFeatures')}</p>
             <div className="features-list">
-              {activeEngine.features.slice(0, 8).map(feature => (
+              {activeEngine.features.map(feature => (
                 <span key={feature} className="feature-tag">
-                  {feature}
+                  {feature.replace(/-/g, ' ')}
                 </span>
               ))}
-              {activeEngine.features.length > 8 && (
-                <span className="feature-more">{t('plugins.more', { count: activeEngine.features.length - 8 })}</span>
-              )}
             </div>
           </div>
         )}

dashboard/src/pages/Sessions.css

@@ -239,6 +239,57 @@
   .sessions-grid {
     grid-template-columns: 1fr;
   }
+
+  .sessions-page {
+    padding: 1rem;
+  }
+
+  .filters-bar {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .search-input {
+    max-width: none;
+  }
+
+  .filter-group {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .filter-group select {
+    flex: 1;
+  }
+
+  .header-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .sessions-page .btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .session-card {
+    padding: 1rem;
+  }
+
+  .card-actions {
+    flex-direction: column;
+  }
+
+  .card-actions .btn-action {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .sessions-page {
+    padding: 0.75rem;
+  }
 }
 
 /* Modal Overlay */