cleanup

app/assets/css/app.css

@@ -76,6 +76,108 @@ main {
     padding: 24px 32px 48px;
 }
 
+/* Shared components -------------------------------------------------- */
+.filter-form {
+    margin: 20px 0;
+}
+
+.filter-form form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.filter-form input,
+.filter-form select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+}
+
+.search-input {
+    flex: 1;
+    min-width: 250px;
+}
+
+.connections-container {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: #fff;
+    border: 1px solid #e0e6ef;
+    border-radius: 12px;
+    box-shadow: 0 12px 40px rgba(15, 26, 45, 0.08);
+}
+
+.connections-list {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
+
+.connections-list th {
+    background: #f5f5f5;
+    padding: 12px;
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+    font-weight: 600;
+    font-size: 0.9rem;
+    letter-spacing: 0.02em;
+}
+
+.connections-list td {
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+    font-size: 0.95rem;
+}
+
+.connections-list tr:hover {
+    background: #fafafa;
+}
+
+.status-cell {
+    width: 140px;
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.status-badge-warning {
+    background: #fff4e5;
+    color: #bb4c26;
+    border: 1px solid #f9c8a3;
+}
+
+.status-badge-ok {
+    background: #e6f4ea;
+    color: #1b7333;
+    border: 1px solid #a6d4b8;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 8px;
+}
+
+@media (max-width: 900px) {
+    .connections-list th,
+    .connections-list td {
+        font-size: 0.85rem;
+    }
+}
+
 @media (max-width: 900px) {
     .app-header {
         flex-direction: column;