style: unify UI styling & restore dashboard logic

- Restored HW/SW Dashboard full features (Chart.js, filters, tables) from main
- Unified Search Bar & Filter Bar across all views (List, Location)
- Integrated asset identity info into all Modal Headers
- Standardized 'Remove Row' buttons as high-visibility circular circles
- Centralized hardcoded inline styles into dedicated CSS files
- Fixed various ReferenceErrors and layout regressions in HWModal

src/styles/common.css

@@ -31,18 +31,18 @@
   --success: #0070f3;
   --header-height: 64px;
 
-  /* --- Global Typography Scale (Enhanced Fluid Base) --- */
-  --fs-xs: clamp(10px, 1.2vmin + 0.2vw, 15px);
-  --fs-sm: clamp(12px, 1.4vmin + 0.3vw, 18px);
-  --fs-base: clamp(14px, 1.6vmin + 0.4vw, 22px);
-  --fs-md: clamp(18px, 2.5vmin + 0.5vw, 30px);
-  --fs-lg: clamp(24px, 4vmin + 0.6vw, 48px);
-  --fs-xl: clamp(32px, 6vmin + 0.8vw, 72px);
+  /* --- Global Typography Scale (Tighter Clamps) --- */
+  --fs-xs: clamp(10px, 1vmin + 0.1vw, 13px);
+  --fs-sm: clamp(12px, 1.2vmin + 0.2vw, 15px);
+  --fs-base: clamp(13px, 1.4vmin + 0.2vw, 16px);
+  --fs-md: clamp(16px, 2vmin + 0.3vw, 24px);
+  --fs-lg: clamp(20px, 3vmin + 0.4vw, 32px);
+  --fs-xl: clamp(28px, 5vmin + 0.6vw, 48px);
 
-  /* --- Fluid Layout Units (Aggressive) --- */
-  --header-height: clamp(50px, 8vmin, 90px);
-  --spacing-base: clamp(0.75rem, 3vmin, 3rem);
-  --radius-base: clamp(6px, 1.5vmin, 16px);
+  /* --- Layout Units --- */
+  --header-height: 64px;
+  --spacing-base: 1.5rem;
+  --radius-base: 8px;
 }
 
 * {
@@ -433,7 +433,30 @@ input:checked + .role-slider:before {
 .justify-center { justify-content: center; }
 .gap-1 { gap: 0.25rem; }
 .gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
 .gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-y-3 { row-gap: 0.75rem; }
+.gap-x-4 { column-gap: 1rem; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: 1rem !important; }
+.mb-6 { margin-bottom: 1.5rem !important; }
+.pb-4 { padding-bottom: 1rem !important; }
+.p-4 { padding: 1rem !important; }
+.p-2 { padding: 0.5rem !important; }
+.p-8 { padding: 2rem !important; }
+.ml-auto { margin-left: auto !important; }
+.self-end { align-self: flex-end !important; }
+.font-medium { font-weight: 500; }
+.text-muted { color: var(--mute) !important; }
+.mt-12 { margin-top: 3rem !important; }
+.icon-sm { width: 16px; height: 16px; }
+.h-90vh { height: 90vh !important; }
+.pt-0 { padding-top: 0 !important; }
+.font-semibold { font-weight: 600; }
+
+
+
 .w-full { width: 100%; }
 .h-full { height: 100%; }
 
@@ -442,9 +465,154 @@ input:checked + .role-slider:before {
 .text-right { text-align: right !important; }
 .text-left { text-align: left !important; }
 .font-bold { font-weight: 700; }
-.font-semibold { font-weight: 600; }
+.bg-primary-light { background-color: var(--primary-light) !important; }
+.text-success { color: var(--success) !important; }
+.text-danger { color: var(--danger) !important; }
+.text-blue { color: var(--color-blue) !important; }
+.text-orange { color: var(--color-orange) !important; }
+/* --- Unified Search & Filter Bar --- */
+.search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-base);
+  padding: 1.25rem var(--spacing-base);
+  border-bottom: 1px solid var(--hairline);
+  align-items: flex-end; 
+  background: var(--canvas);
+  box-sizing: border-box;
+}
+
+.search-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.search-item.flex-1 {
+  flex: 1;
+  min-width: 300px;
+}
+
+.search-item label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.search-item input, 
+.search-item select {
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.75rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-size: var(--fs-sm);
+  outline: none;
+  background-color: var(--canvas);
+  color: var(--primary);
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.search-item select {
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.search-item input:focus, 
+.search-item select:focus {
+  border-color: var(--primary);
+}
+
+.header-action-group {
+  margin-left: auto;
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-view-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--primary);
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.5rem;
+  font-size: var(--fs-sm);
+  user-select: none;
+}
+
+.list-view-toggle-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.map-pagination-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-left: 0.5rem;
+  padding-left: 1rem;
+  border-left: 1px solid var(--hairline);
+  height: clamp(34px, 4.5vmin, 44px);
+}
+
+.page-info {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+
+/* --- Modal & View Header Layouts --- */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* --- Asset Identity & Header Styling (Global) --- */
+.header-identity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap;
+}
+
+.asset-code-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.05em;
+  line-height: 1;
+}
+
+.service-type-badge {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.asset-type-label {
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--mute);
+  line-height: 1;
+}
 
-/* --- Footer --- */
 .main-footer {
   border-top: 1px solid var(--border-color);
   background-color: var(--canvas);