Fix tenant SSO status mode and refactor status UI tiles

web/css/components/app-form-info-tile.css

@@ -0,0 +1,71 @@
+@layer components {
+  .app-form-info-tiles-title {
+    display: block;
+    margin-bottom: calc(var(--app-spacing) * 0.55);
+    color: var(--app-muted-color);
+  }
+
+  .app-form-info-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: calc(var(--app-spacing) * 0.75);
+    margin-bottom: calc(var(--app-spacing) * 0.75);
+  }
+
+  .app-form-info-tile {
+    border: 1px solid var(--badge-neutral-border);
+    border-radius: var(--app-border-radius);
+    background: var(--badge-neutral-bg);
+    padding: calc(var(--app-spacing) * 0.75);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--app-spacing) * 0.35);
+    margin: 0;
+    box-shadow: none;
+  }
+
+  .app-form-info-tile-label {
+    display: block;
+    color: var(--app-muted-color);
+    line-height: 1.3;
+  }
+
+  .app-form-info-tile-value {
+    display: block;
+    color: var(--app-contrast);
+    line-height: 1.35;
+  }
+
+  .app-form-info-tile--success {
+    border-color: var(--badge-success-border);
+    background: var(--badge-success-bg);
+  }
+
+  .app-form-info-tile--success .app-form-info-tile-value {
+    color: var(--badge-success-color);
+  }
+
+  .app-form-info-tile--info {
+    border-color: var(--badge-info-border);
+    background: var(--badge-info-bg);
+  }
+
+  .app-form-info-tile--info .app-form-info-tile-value {
+    color: var(--badge-info-color);
+  }
+
+  .app-form-info-tile--warning {
+    border-color: var(--badge-warn-border);
+    background: var(--badge-warn-bg);
+  }
+
+  .app-form-info-tile--warning .app-form-info-tile-value {
+    color: var(--badge-warn-color);
+  }
+
+  @media (max-width: 640px) {
+    .app-form-info-tiles {
+      grid-template-columns: 1fr;
+    }
+  }
+}