From d31fb6c79f3000f1612f5674028bd0567744f465 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Mon, 30 Mar 2026 23:57:35 -0700
Subject: [PATCH] style: fix household management dark card surfaces

---
 .../components/manage/ManageHousehold.css     | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/frontend/src/styles/components/manage/ManageHousehold.css b/frontend/src/styles/components/manage/ManageHousehold.css
index 701b21f..cfb0d9f 100644
--- a/frontend/src/styles/components/manage/ManageHousehold.css
+++ b/frontend/src/styles/components/manage/ManageHousehold.css
@@ -23,6 +23,14 @@
   box-shadow: var(--shadow-sm);
 }
 
+[data-theme="dark"] .manage-section,
+body.dark-mode .manage-section {
+  background:
+    linear-gradient(180deg, rgba(26, 37, 52, 0.98), rgba(18, 27, 40, 0.94)),
+    var(--card-bg);
+  border-color: var(--color-border-medium);
+}
+
 .manage-section-header {
   display: flex;
   align-items: flex-start;
@@ -116,6 +124,12 @@
   color: var(--text-primary);
 }
 
+[data-theme="dark"] .edit-name-form input,
+body.dark-mode .edit-name-form input {
+  background: rgba(12, 19, 30, 0.92);
+  border-color: var(--color-border-medium);
+}
+
 /* Invite Code Section */
 .invite-actions {
   display: flex;
@@ -133,6 +147,12 @@
   background: rgba(255, 255, 255, 1);
 }
 
+[data-theme="dark"] .invite-code-panel,
+body.dark-mode .invite-code-panel {
+  background: rgba(12, 19, 30, 0.9);
+  border-color: var(--color-border-medium);
+}
+
 .invite-code-copy {
   display: flex;
   flex-direction: column;
@@ -165,6 +185,12 @@
   letter-spacing: 0.04em;
 }
 
+[data-theme="dark"] .invite-code,
+body.dark-mode .invite-code {
+  background: rgba(8, 14, 24, 0.95);
+  border-color: var(--color-border-medium);
+}
+
 .invite-action-group {
   display: flex;
   flex-wrap: wrap;
@@ -208,6 +234,12 @@
   color: var(--text-primary);
 }
 
+[data-theme="dark"] .invite-controls select,
+body.dark-mode .invite-controls select {
+  background: rgba(12, 19, 30, 0.92);
+  border-color: var(--color-border-medium);
+}
+
 .invite-links-list {
   display: flex;
   flex-direction: column;
@@ -225,6 +257,12 @@
   background: rgba(255, 255, 255, 1);
 }
 
+[data-theme="dark"] .invite-link-card,
+body.dark-mode .invite-link-card {
+  background: rgba(12, 19, 30, 0.9);
+  border-color: var(--color-border-medium);
+}
+
 .invite-link-main {
   min-width: 0;
 }
@@ -273,6 +311,12 @@
   color: var(--color-gray-700);
 }
 
+[data-theme="dark"] .invite-status-badge.is-used,
+body.dark-mode .invite-status-badge.is-used {
+  background: rgba(100, 116, 139, 0.22);
+  color: #d9e2ef;
+}
+
 .invite-status-badge.is-revoked {
   background: var(--danger-light);
   color: var(--danger);
@@ -309,12 +353,23 @@
   transition: all 0.2s;
 }
 
+[data-theme="dark"] .member-card,
+body.dark-mode .member-card {
+  background: rgba(12, 19, 30, 0.9);
+  border-color: var(--color-border-medium);
+}
+
 .member-card:hover {
   background: var(--card-hover);
   border-color: var(--primary);
   transform: translateY(-1px);
 }
 
+[data-theme="dark"] .member-card:hover,
+body.dark-mode .member-card:hover {
+  background: rgba(20, 32, 48, 0.98);
+}
+
 .member-avatar {
   width: 2.6rem;
   height: 2.6rem;
@@ -406,6 +461,14 @@
     var(--card-bg);
 }
 
+[data-theme="dark"] .danger-zone,
+body.dark-mode .danger-zone {
+  background:
+    linear-gradient(180deg, rgba(70, 26, 32, 0.92), rgba(28, 14, 19, 0.94)),
+    var(--card-bg);
+  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
+}
+
 .danger-zone h2,
 .danger-zone .manage-section-eyebrow {
   color: var(--danger);