From ae7ca7e38206f1dfb33bfb9725d9ffddd09278b1 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 28 Jun 2026 09:58:40 +0900
Subject: [PATCH] fix: remove :deep() CSS selectors and strengthen admin
 dashboard styles

- Remove :deep() pseudo-selectors (not supported in external CSS files)
- Add !important to metric card, accent colors, and page hero styles to ensure MudBlazor components display correctly
- Improve CSS specificity for typography classes (.mud-typography--h3 and .mud-typography-h3)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 TaxBaik.Web/wwwroot/css/admin.css | 97 ++++++++++++++++---------------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/TaxBaik.Web/wwwroot/css/admin.css b/TaxBaik.Web/wwwroot/css/admin.css
index cd67598..08060bd 100644
--- a/TaxBaik.Web/wwwroot/css/admin.css
+++ b/TaxBaik.Web/wwwroot/css/admin.css
@@ -265,13 +265,13 @@ html, body {
     padding: 16px 0;
 }
 
-.admin-nav :deep(.mud-nav-link),
-.admin-nav :deep(.mud-nav-group-header) {
+.admin-nav .mud-nav-link,
+.admin-nav .mud-nav-group-header {
     margin: 4px 8px;
     border-radius: 8px;
 }
 
-.admin-nav :deep(.mud-nav-link.active) {
+.admin-nav .mud-nav-link.active {
     background-color: #e3f2fd;
 }
 
@@ -296,36 +296,36 @@ html, body {
 
 /* Page Header */
 .admin-page-hero {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 24px;
-    margin-bottom: 32px;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #e0e0e0;
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: flex-end !important;
+    gap: 24px !important;
+    margin-bottom: 32px !important;
+    padding-bottom: 24px !important;
+    border-bottom: 1px solid #e0e0e0 !important;
 }
 
 .admin-eyebrow {
-    display: block;
-    color: #1976d2;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
+    display: block !important;
+    color: #1976d2 !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    font-size: 0.75rem !important;
+    letter-spacing: 0.5px !important;
+    margin-bottom: 4px !important;
 }
 
 .admin-page-title {
-    display: block;
-    color: #1a1a1a;
-    font-weight: 600;
-    margin-bottom: 8px;
+    display: block !important;
+    color: #1a1a1a !important;
+    font-weight: 600 !important;
+    margin-bottom: 8px !important;
 }
 
 .admin-page-subtitle {
-    display: block;
-    color: #666;
-    font-size: 0.95rem;
+    display: block !important;
+    color: #666 !important;
+    font-size: 0.95rem !important;
 }
 
 /* Metrics Grid */
@@ -334,18 +334,19 @@ html, body {
 }
 
 .admin-metric-card {
-    padding: 20px;
-    border-radius: 8px;
-    background-color: #fff;
-    border: 1px solid #e0e0e0;
-    transition: all 0.2s ease;
-    cursor: pointer;
+    padding: 20px !important;
+    border-radius: 8px !important;
+    background-color: #fff !important;
+    border: 1px solid #e0e0e0 !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    display: block !important;
 }
 
 .admin-metric-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    border-color: #d0d0d0;
-    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    border-color: #d0d0d0 !important;
+    transform: translateY(-2px) !important;
 }
 
 .admin-metric-card .mud-typography-caption {
@@ -369,39 +370,43 @@ html, body {
 }
 
 .accent-blue {
-    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-    border-color: #90caf9;
+    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
+    border-color: #90caf9 !important;
 }
 
+.accent-blue .mud-typography--h3,
 .accent-blue .mud-typography-h3 {
-    color: #1565c0;
+    color: #1565c0 !important;
 }
 
 .accent-amber {
-    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-    border-color: #ffcc80;
+    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
+    border-color: #ffcc80 !important;
 }
 
+.accent-amber .mud-typography--h3,
 .accent-amber .mud-typography-h3 {
-    color: #e65100;
+    color: #e65100 !important;
 }
 
 .accent-slate {
-    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
-    border-color: #b0bec5;
+    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%) !important;
+    border-color: #b0bec5 !important;
 }
 
+.accent-slate .mud-typography--h3,
 .accent-slate .mud-typography-h3 {
-    color: #455a64;
+    color: #455a64 !important;
 }
 
 .accent-green {
-    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-    border-color: #81c784;
+    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
+    border-color: #81c784 !important;
 }
 
+.accent-green .mud-typography--h3,
 .accent-green .mud-typography-h3 {
-    color: #2e7d32;
+    color: #2e7d32 !important;
 }
 
 /* Surfaces */
@@ -482,7 +487,7 @@ html, body {
     text-decoration: underline;
 }
 
-.admin-table :deep(.mud-chip-small) {
+.admin-table .mud-chip-small {
     height: 24px;
     font-size: 0.75rem;
 }