From a6e941eb01b357065b8d4da3ff879d5573d797c1 Mon Sep 17 00:00:00 2001
From: Erik <erik.nihlen@gmail.com>
Date: Fri, 13 Mar 2026 19:52:49 +0100
Subject: [PATCH] fix: simplify burden meter to pure inline styles

---
 static/script.js | 19 ++++------------
 static/style.css | 59 +++++++-----------------------------------------
 2 files changed, 12 insertions(+), 66 deletions(-)

diff --git a/static/script.js b/static/script.js
index a646377d..1116012d 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1384,27 +1384,16 @@ function renderInventoryState(state) {
   const burdenDisplay = Math.floor(burdenPct);
   state.burdenLabel.textContent = `${burdenDisplay}%`;
   state.burdenLabel.title = burdenUnits > 0 && encumbranceCapacity > 0
-    ? `${burdenUnits}/${encumbranceCapacity}`
+    ? `${burdenUnits.toLocaleString()} / ${encumbranceCapacity.toLocaleString()}`
     : '';
-  state.burdenLabel.style.color = '#ffffff';
-  state.burdenLabel.style.zIndex = '3';
-  state.burdenFill.style.height = `${Math.min(100, burdenPct)}%`;
-  state.burdenFill.style.minHeight = burdenPct > 0 ? '3px' : '0';
-  state.burdenFill.className = 'inv-burden-fill';
+  // Fill height: map 0-200% burden onto 0-100% bar height
+  state.burdenFill.style.height = `${burdenPct / 2}%`;
+  // Color by threshold
   state.burdenFill.style.backgroundColor = burdenPct > 150
     ? '#b7432c'
     : burdenPct > 100
       ? '#d8a431'
       : '#2e8b57';
-  state.burdenFill.style.opacity = '1';
-  state.burdenFill.style.borderTop = '1px solid rgba(255,255,255,0.18)';
-  if (burdenPct > 150) {
-    state.burdenFill.classList.add('is-danger');
-  } else if (burdenPct > 100) {
-    state.burdenFill.classList.add('is-warning');
-  } else {
-    state.burdenFill.classList.add('is-safe');
-  }
 
   // 4. Sort containers for stable sidebar order (by unsigned item_id)
   containers.sort((a, b) => {
diff --git a/static/style.css b/static/style.css
index 4db5e31c..2e352141 100644
--- a/static/style.css
+++ b/static/style.css
@@ -819,56 +819,32 @@ body.noselect, body.noselect * {
 }
 
 .inv-burden-bar {
-  width: 16px;
+  width: 14px;
   height: 40px;
-  background: #060606;
+  background: #111;
   border: 1px solid var(--ac-border-light);
   position: relative;
-  overflow: visible;
+  overflow: hidden;
   margin-bottom: 2px;
-  margin-top: 12px;
   flex-shrink: 0;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .inv-burden-fill {
   width: 100%;
-  background: var(--ac-green);
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 0%;
-  transition: height 0.3s ease;
-  z-index: 1;
-  display: block;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
-}
-
-.inv-burden-fill.is-safe {
-  background: var(--ac-green) !important;
-}
-
-.inv-burden-fill.is-warning {
-  background: #d8a431 !important;
-}
-
-.inv-burden-fill.is-danger {
-  background: #b7432c !important;
+  transition: height 0.3s ease, background-color 0.3s ease;
 }
 
 .inv-burden-label {
-  position: relative;
-  top: 0;
-  width: 60px;
-  left: 50%;
-  transform: translateX(-50%);
   text-align: center;
-  font-size: 11px;
-  color: var(--ac-gold);
-  z-index: 2;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  font-size: 9px;
+  color: #ccc;
+  white-space: nowrap;
+  margin-bottom: 2px;
 }
 
 .inv-pack-list {
@@ -2415,26 +2391,7 @@ table.ts-allegiance td:first-child {
   display: block;
 }
 
-.inv-burden-bar {
-  width: 14px !important;
-  height: 40px !important;
-  margin-top: 20px !important;
-}
 
-.inv-burden-label {
-  position: relative !important;
-  top: 0 !important;
-  width: 60px !important;
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  text-align: center !important;
-  font-size: 9px !important;
-  color: #fff !important;
-  font-weight: normal !important;
-  line-height: 1.1 !important;
-  margin-top: 0 !important;
-  margin-bottom: 4px !important;
-}
 
 .inventory-count {
   display: block !important;