From 185e0cc611b16fd3bd1dc768de9d0ec52d65aea3 Mon Sep 17 00:00:00 2001
From: Christian <christian@p20.dev>
Date: Fri, 16 Oct 2026 14:11:30 +0200
Subject: [PATCH] fix(ui): unify header bar styling, height, and full-width
 edge-to-edge layout

---
 frontend/css/layout/header.css     | 180 +++++++++++++++++++++--------
 frontend/css/layout/responsive.css |   5 +-
 2 files changed, 137 insertions(+), 48 deletions(-)

diff --git a/frontend/css/layout/header.css b/frontend/css/layout/header.css
index 97d99f8..21923fe 100644
--- a/frontend/css/layout/header.css
+++ b/frontend/css/layout/header.css
@@ -17,7 +17,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 16px;
+    padding: 8px 24px;
+    width: 100%;
+    box-sizing: border-box;
     border-bottom: 1px solid var(--border-color);
 }
 
@@ -98,47 +100,58 @@
     background: var(--primary-blue-light);
 }
 
-/* Financial HUD: Desktop 3-part layout (Left: Finances, Center: Sector Bar, Right: Dept Buttons & Multiplier) */
+/* Financial HUD: Full-width corporate control bar spanning 100% of the screen */
 #financial-hud {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 16px;
-    padding: 8px 16px;
-    max-width: 1680px;
-    margin: 0 auto;
+    gap: 14px;
+    padding: 8px 24px;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
     box-sizing: border-box;
 }
 
 /* Consolidated Executive Financial Hub */
 .executive-fin-hub {
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: 14px;
+    gap: 12px;
     padding: 6px 14px;
+    height: 48px;
     border-radius: var(--radius-md);
-    background: #f8faff;
-    border: 1px solid #bfdbfe;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
     flex-shrink: 0;
-    min-width: 270px;
     box-shadow: var(--shadow-sm);
+    box-sizing: border-box;
+    transition: border-color 0.15s, background-color 0.15s;
+}
+
+.executive-fin-hub:hover {
+    border-color: var(--border-subtle);
 }
 
 .fin-hub-main {
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    min-width: 110px;
 }
 
 .fin-hub-divider {
     width: 1px;
-    height: 38px;
-    background: #cbd5e1;
+    height: 30px;
+    background: var(--border-color);
+    flex-shrink: 0;
 }
 
 .fin-hub-details {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     gap: 2px;
 }
 
@@ -151,10 +164,11 @@
 }
 
 .fin-detail-label {
-    font-size: 0.68rem;
+    font-size: 0.65rem;
     font-weight: 700;
     color: var(--text-muted);
     text-transform: uppercase;
+    letter-spacing: 0.03em;
 }
 
 .fin-detail-val {
@@ -163,24 +177,27 @@
 }
 
 .hud-label {
-    font-size: 0.68rem;
+    font-size: 0.65rem;
     font-weight: 700;
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.04em;
+    line-height: 1;
+    margin-bottom: 2px;
 }
 
 .hud-main-val {
-    font-size: 1.20rem;
+    font-size: 1.15rem;
     font-weight: 800;
     color: var(--text-primary);
     line-height: 1.1;
-    margin: 1px 0;
 }
 
 .hud-sub-val {
-    font-size: 0.72rem;
+    font-size: 0.70rem;
     font-weight: 700;
+    line-height: 1;
+    margin-top: 2px;
 }
 
 .rate-positive {
@@ -191,13 +208,14 @@
     color: var(--purple-rnd);
 }
 
-/* Centered Sector Container in Sticky Header */
+/* Centered Sector Container in Sticky Header - Dynamic full expansion */
 #header-sector-container {
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     justify-content: center;
+    align-items: center;
     min-width: 0;
-    max-width: 820px;
+    max-width: 100%;
 }
 
 #header-sector-container .production-toolbar {
@@ -205,20 +223,66 @@
     background: var(--bg-surface);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
-    padding: 4px 6px;
+    padding: 4px;
+    height: 48px;
+    display: flex;
+    align-items: center;
     box-sizing: border-box;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+    box-shadow: var(--shadow-sm);
+}
+
+#header-sector-container .sector-tabs-scroll {
+    display: flex;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
 }
 
 #header-sector-container .sector-pill {
-    padding: 6px 4px;
+    flex: 1 1 0;
+    height: 38px;
+    padding: 0 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background: var(--bg-surface-sub);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+#header-sector-container .sector-pill:hover {
+    border-color: var(--border-subtle);
+    background: var(--border-color);
+}
+
+#header-sector-container .sector-pill.active {
+    background: var(--text-primary);
+    color: #ffffff;
+    border-color: var(--text-primary);
+    box-shadow: var(--shadow-sm);
+}
+
+#header-sector-container .sector-pill.active iconify-icon {
+    color: #ffffff !important;
+}
+
+#header-sector-container .sector-pill.active .sector-pill-rate {
+    color: #a7f3d0;
 }
 
 /* Right Header Actions: Department Nav & Buy Multiplier */
 .header-right-actions {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     flex-shrink: 0;
 }
 
@@ -226,36 +290,41 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    background: var(--bg-surface-sub);
+    background: var(--bg-surface);
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    padding: 3px;
+    border-radius: var(--radius-md);
+    padding: 4px;
+    height: 48px;
+    box-sizing: border-box;
+    box-shadow: var(--shadow-sm);
 }
 
 .header-nav-btn {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
-    padding: 5px 10px;
+    justify-content: center;
+    gap: 6px;
+    height: 38px;
+    padding: 0 12px;
     background: transparent;
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     color: var(--text-secondary);
-    font-size: 0.78rem;
+    font-size: 0.80rem;
     font-weight: 700;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: all 0.15s ease;
     white-space: nowrap;
     text-decoration: none;
-    line-height: 1;
+    box-sizing: border-box;
 }
 
 .header-nav-btn iconify-icon {
-    font-size: 1.05rem;
+    font-size: 1.15rem;
 }
 
 .header-nav-btn:hover {
-    background: var(--bg-surface);
+    background: var(--bg-surface-sub);
     color: var(--text-primary);
     border-color: var(--border-color);
 }
@@ -278,8 +347,12 @@
 
 .header-nav-btn .nav-pill-badge {
     margin-left: 2px;
-    padding: 1px 5px;
+    padding: 2px 6px;
     font-size: 0.65rem;
+    font-weight: 800;
+    border-radius: 10px;
+    background: var(--amber-dark);
+    color: #ffffff;
 }
 
 .hud-multiplier-box {
@@ -289,29 +362,44 @@
 
 .multi-button-group {
     display: flex;
-    background: var(--bg-surface-sub);
+    align-items: center;
+    background: var(--bg-surface);
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    padding: 2px;
-    gap: 2px;
+    border-radius: var(--radius-md);
+    padding: 4px;
+    height: 48px;
+    gap: 3px;
+    box-sizing: border-box;
+    box-shadow: var(--shadow-sm);
 }
 
 .btn-multi-pill {
     background: transparent;
-    border: none;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.75rem;
+    border: 1px solid transparent;
+    height: 38px;
+    padding: 0 10px;
+    border-radius: var(--radius-sm);
+    font-size: 0.78rem;
     font-weight: 700;
     color: var(--text-secondary);
     cursor: pointer;
     font-family: var(--font-mono);
-    transition: all 0.15s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+}
+
+.btn-multi-pill:hover {
+    background: var(--bg-surface-sub);
+    color: var(--text-primary);
 }
 
 .btn-multi-pill.active {
     background: var(--text-primary);
     color: #ffffff;
+    border-color: var(--text-primary);
     box-shadow: var(--shadow-sm);
 }
 
diff --git a/frontend/css/layout/responsive.css b/frontend/css/layout/responsive.css
index 5114f16..59637ba 100644
--- a/frontend/css/layout/responsive.css
+++ b/frontend/css/layout/responsive.css
@@ -72,11 +72,12 @@
     #financial-hud {
         flex-wrap: wrap;
         gap: 8px;
+        padding: 8px 12px;
     }
 
     .executive-fin-hub {
-        min-width: auto;
-        flex: 1;
+        min-width: 0;
+        flex: 1 1 auto;
     }
 
     #header-sector-container {