added docs tab and improved authentication on dash

monitoring_ui/src/styles.css

@@ -603,6 +603,118 @@ textarea:focus {
     min-width: 150px;
   }
 }
+.login-form {
+  border-top: 1px solid var(--line);
+  padding-top: 20px;
+  margin-top: 10px;
+}
+.login-form h3 {
+  font-size: 14px;
+  margin: 0 0 14px;
+}
+.login-form label {
+  display: grid;
+  gap: 7px;
+  margin: 12px 0;
+  color: var(--muted);
+  font: 10px "DM Mono", monospace;
+  text-transform: uppercase;
+}
+.login-form input {
+  width: 100%;
+}
+.login-error {
+  color: var(--coral);
+  font-size: 11px;
+  margin: 10px 0;
+}
+.user-info {
+  border-top: 1px solid var(--line);
+  padding-top: 20px;
+  margin-top: 10px;
+}
+.user-info h3 {
+  font-size: 14px;
+  margin: 0 0 12px;
+}
+.user-info p {
+  margin: 6px 0;
+  font-size: 12px;
+}
+.user-info button {
+  margin-top: 14px;
+}
+.docs-panel {
+  min-height: 500px;
+}
+.docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
+}
+.doc-card {
+  background: rgba(23, 32, 34, 0.88);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 20px;
+  border-top: 2px solid var(--card-color);
+}
+.doc-card.amber { --card-color: var(--amber); }
+.doc-card.teal { --card-color: var(--mint); }
+.doc-card.blue { --card-color: var(--blue); }
+.doc-card.coral { --card-color: var(--coral); }
+.doc-header {
+  display: flex;
+  gap: 12px;
+  align-items: start;
+  margin-bottom: 12px;
+}
+.doc-header .service-dot {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.doc-header strong { display: block; font-size: 14px; }
+.doc-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
+.doc-description {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+  margin-bottom: 14px;
+}
+.doc-links {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.doc-link {
+  color: var(--mint);
+  text-decoration: none;
+  font: 500 11px "DM Mono", monospace;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.doc-link:hover { text-decoration: underline; }
+.routes-detail summary {
+  color: var(--muted);
+  font: 500 10px "DM Mono", monospace;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+.routes-detail ul {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 11px;
+  color: #c6d5d3;
+}
+.routes-detail li { margin: 4px 0; }
+.routes-detail code {
+  font: 11px "DM Mono", monospace;
+  background: #111a1c;
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
 @media (max-width: 700px) {
   .app-shell {
     padding: 0 18px 40px;