From c59e37295fa2b6b3cdc6a93c08131f5c9ea37579 Mon Sep 17 00:00:00 2001
From: Chris Christiansen <chris.christiansen@vauco.no>
Date: Thu, 4 Jun 2026 21:52:31 +0000
Subject: [PATCH] feat(ui): CostGuard dark Vauco redesign + mobile-first for
 CostGuard & OPAX hub

---
 static/billing-dashboard.html | 65 ++++++++++++++++++++++++-----------
 static/opax.html              | 19 ++++++++--
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/static/billing-dashboard.html b/static/billing-dashboard.html
index 3155d2c..798160c 100644
--- a/static/billing-dashboard.html
+++ b/static/billing-dashboard.html
@@ -5,37 +5,39 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CostGuard · Billing</title>
 <link rel="manifest" href="/manifest.json">
-<meta name="theme-color" content="#4285f4">
+<meta name="theme-color" content="#0a0a0f">
 <link rel="apple-touch-icon" href="/static/icons/icon-192x192.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
 <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>
 <style>
 :root{
-  --bg:#0d1117;--surface:#161b22;--surface-2:#1c2128;--surface-3:#242c38;
-  --border:rgba(139,148,158,0.1);--border-h:rgba(139,148,158,0.2);
-  --text:#e6edf3;--muted:#8b949e;--faint:#30363d;
-  --blue:#4285f4;--blue-bg:rgba(66,133,244,0.1);--blue-border:rgba(66,133,244,0.25);
-  --green:#34a853;--green-bg:rgba(52,168,83,0.1);
-  --yellow:#fbbc04;--yellow-bg:rgba(251,188,4,0.1);
-  --red:#ea4335;--red-bg:rgba(234,67,53,0.1);
-  --gem-a:#8ab4f8;--gem-b:#c58af9;--gem-c:#81c995;
-  --font:'Google Sans','Roboto',sans-serif;--mono:'Google Sans Mono','Roboto Mono',monospace;
-  --r:8px;--tr:200ms cubic-bezier(0.2,0,0,1);
+  --bg:#0a0a0f;--surface:#13131c;--surface-2:#1a1a26;--surface-3:#242436;
+  --border:rgba(124,92,255,0.12);--border-h:rgba(124,92,255,0.28);
+  --text:#ececf5;--muted:#8a8aa3;--faint:#3a3a4d;
+  --blue:#7c5cff;--blue-bg:rgba(124,92,255,0.12);--blue-border:rgba(124,92,255,0.3);
+  --primary:#7c5cff;--accent-2:#00d4a8;
+  --green:#00d4a8;--green-bg:rgba(0,212,168,0.12);
+  --yellow:#ffb454;--yellow-bg:rgba(255,180,84,0.12);
+  --red:#ff5c7c;--red-bg:rgba(255,92,124,0.12);
+  --ok:#00d4a8;--warn:#ffb454;
+  --gem-a:#7c5cff;--gem-b:#00d4a8;--gem-c:#a78bfa;
+  --font:'Inter',-apple-system,sans-serif;--mono:'JetBrains Mono',monospace;
+  --r:10px;--tr:200ms cubic-bezier(0.2,0,0,1);
 }
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 html{-webkit-font-smoothing:antialiased}
 body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
 .topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0;position:sticky;top:0;z-index:200}
 .tb-logo{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--border)}
-.tb-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#4285f4,#8ab4f8);border-radius:6px;display:flex;align-items:center;justify-content:center}
+.tb-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#7c5cff,#00d4a8);border-radius:8px;display:flex;align-items:center;justify-content:center}
 .tb-logo-icon svg{fill:#fff;width:16px;height:16px}
 .tb-logo-name{font-size:15px;font-weight:500;letter-spacing:-.01em}
-.tb-logo-name span{color:var(--blue);font-weight:700}
+.tb-logo-name span{background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
 .tb-project{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 8px;border-radius:6px;font-size:13px;color:var(--muted)}
 .tb-project .material-symbols-outlined{font-size:16px}
 .tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
@@ -56,7 +58,7 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
 .nav-section{padding:8px 16px 4px;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
 .nav-item{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--tr);border-radius:0 20px 20px 0;margin-right:8px}
 .nav-item:hover{background:var(--surface-2);color:var(--text)}
-.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:500}
+.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;border-left:2px solid var(--blue)}
 .nav-item .material-symbols-outlined{font-size:18px}
 .content{flex:1;padding:24px;overflow:hidden}
 .onboarding-banner{background:linear-gradient(135deg,rgba(66,133,244,0.08),rgba(138,180,248,0.05));border:1px solid var(--blue-border);border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
@@ -68,8 +70,8 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
 .ob-close{margin-left:auto;cursor:pointer;color:var(--muted);transition:color var(--tr);background:none;border:none;padding:4px}
 .ob-close:hover{color:var(--text)}
 .page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
-.page-title{font-size:22px;font-weight:400;letter-spacing:-.01em}
-.page-title strong{font-weight:500}
+.page-title{font-size:24px;font-weight:600;letter-spacing:-.02em}
+.page-title strong{font-weight:700;background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
 .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
 .kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;transition:box-shadow var(--tr),border-color var(--tr)}
 .kpi:hover{border-color:var(--border-h);box-shadow:0 1px 8px rgba(0,0,0,.3)}
@@ -116,6 +118,27 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
 .err-banner.show{display:flex}
 footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:center}
 @media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}.charts-row,.bottom-row{grid-template-columns:1fr}}
+@media(max-width:720px){
+  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
+  .tb-logo{padding:0 10px 0 0;border-right:none}
+  .tb-project{display:none}
+  .tb-right{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:6px}
+  .tb-right::-webkit-scrollbar{display:none}
+  .tb-right>*{flex-shrink:0}
+  .layout{flex-direction:column}
+  .sidebar{width:100%;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:4px}
+  .sidebar::-webkit-scrollbar{display:none}
+  .nav-section{display:none}
+  .nav-item{flex-shrink:0;border-radius:99px;border-left:none;margin-right:0;padding:8px 14px;white-space:nowrap}
+  .nav-item.active{border-left:none;border:1px solid var(--blue)}
+  .content{padding:16px 12px}
+  .kpi-row{grid-template-columns:1fr 1fr;gap:8px}
+  .kpi{padding:14px}
+  .kpi-val{font-size:20px}
+  .page-title{font-size:20px}
+  .card{padding:14px}
+}
+@media(max-width:420px){.kpi-row{grid-template-columns:1fr}}
 @media print {
     body {
         background: #fff;
@@ -649,7 +672,7 @@ function buildBar(labels, costs){
   const avgC=costs.reduce((a,b)=>a+b,0)/costs.length;
 
   barChart=new Chart(ctx,{type:'bar',data:{labels,datasets:[
-    {label:'Kostnad',data:costs,backgroundColor:'rgba(66,133,244,0.5)',borderRadius:4,borderSkipped:false}
+    {label:'Kostnad',data:costs,backgroundColor:'rgba(124,92,255,0.55)',borderRadius:4,borderSkipped:false}
   ]},options:{responsive:true,maintainAspectRatio:false,
     plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,21,19,.95)',borderColor:'rgba(255,255,255,.08)',borderWidth:1,titleColor:'#7a7874',bodyColor:'#e8e6e2',titleFont:{family:'Inter',size:11},bodyFont:{family:'JetBrains Mono',size:12,weight:'600'},callbacks:{label:c=>'  '+fmtNOK(c.raw,2)}}},
     scales:{x:{grid:{display:false},ticks:{color:'#3f3d3a',font:{size:10},maxTicksLimit:15}},y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#3f3d3a',font:{family:'JetBrains Mono',size:10},callback:v=>'kr '+v.toFixed(2)},border:{display:false}}}}});
@@ -668,7 +691,7 @@ function buildDonut(summary){
   const ctx=document.getElementById('donut-chart').getContext('2d');
   if(donutChart)donutChart.destroy();
   const top=summary.filter(s=>(s.total_cost||0)>0).slice(0,7);
-  donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.total_cost||0),backgroundColor:['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'],borderColor:'#161b22',borderWidth:2,hoverBorderWidth:3}]},
+  donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.total_cost||0),backgroundColor:['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'],borderColor:'#13131c',borderWidth:2,hoverBorderWidth:3}]},
     options:{responsive:true,maintainAspectRatio:false,cutout:'70%',
       plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,27,34,.97)',borderColor:'rgba(139,148,158,.15)',borderWidth:1,titleColor:'#8b949e',bodyColor:'#e6edf3',callbacks:{label:c=>'  '+fmtNOK(c.raw)}}}}});
 }
@@ -685,9 +708,9 @@ function buildSvc(summary){
     const c=s.total_cost||0;
     const pct=(Math.abs(c)/max*100).toFixed(1);
     return`<div class="svc-row">
-      <div class="svc-dot" style="background:${['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'][i%7]}"></div>
+      <div class="svc-dot" style="background:${['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'][i%7]}"></div>
       <span class="svc-name">${s.service}</span>
-      <div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'][i%7]}"></div></div>
+      <div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'][i%7]}"></div></div>
       <span class="svc-cost">${fmtNOK(c)}</span>
     </div>`;
   }).join('');
diff --git a/static/opax.html b/static/opax.html
index 10ba6cf..0c4419f 100644
--- a/static/opax.html
+++ b/static/opax.html
@@ -246,10 +246,23 @@
 
   /* ── Responsive ─────────────────────────────────────────────────────── */
   @media(max-width:860px){
-    .sidebar{display:none}
-    .main{padding:24px 18px 48px}
-    .topbar{padding:12px 16px}
+    .shell{flex-direction:column}
+    .sidebar{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;overflow-x:auto;
+      border-right:none;border-bottom:1px solid var(--border);padding:8px 12px;gap:6px;
+      position:sticky;top:0;background:var(--bg-2);z-index:50}
+    .sidebar::-webkit-scrollbar{display:none}
+    .side-label{display:none}
+    .nav-item{flex-shrink:0;white-space:nowrap;border-radius:99px;padding:8px 13px;align-self:center}
+    .side-foot{display:none}
+    .main{padding:22px 16px 48px}
+    .topbar{padding:12px 16px;flex-wrap:wrap;gap:8px}
     .topbar-id{display:none}
+    .topbar-sub{display:none}
+  }
+  @media(max-width:560px){
+    .chat-drawer{width:100vw}
+    .topbar-right{width:100%;overflow-x:auto;flex-wrap:nowrap}
+    .topbar-right::-webkit-scrollbar{display:none}
   }
 </style>
 </head>