05/18 Enhanced codes and functionalities 7

app/static/css/app.css

@@ -2463,3 +2463,90 @@ html.sidebar-open {
   height: 1px;
   background: var(--border);
 }
+
+/* ── Vault health notifications ─────────────────────────────────────────────── */
+
+/* Sidebar badge — shows issue count on Security link */
+.sidebar-badge {
+  margin-left: auto;
+  background: #c0392b;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 10px;
+  min-width: 16px;
+  text-align: center;
+}
+
+.sidebar-badge.badge-warn {
+  background: #d97706;
+}
+
+/* Health banner — dismissible strip above the vault list */
+.health-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  font-size: 13px;
+  border-bottom: 1px solid transparent;
+  flex-shrink: 0;
+}
+
+.health-banner.banner-danger {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #991b1b;
+}
+
+.health-banner.banner-warn {
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+}
+
+.health-banner.banner-ok {
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+  color: #166534;
+}
+
+.health-banner-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.health-banner-text {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.health-banner-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: underline;
+  color: inherit;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.health-banner-dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  color: inherit;
+  opacity: 0.6;
+  padding: 0 2px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.health-banner-dismiss:hover {
+  opacity: 1;
+}