From fbacc229eab7ac4f2a8e8639c2940bfb10715545 Mon Sep 17 00:00:00 2001
From: Kaloyan Danchev <kaloyandanchev@Kaloyans-MacBook-Air.local>
Date: Sun, 8 Feb 2026 20:46:50 +0200
Subject: [PATCH] Revert "Dashboard visual fixes round 3: CPU bars, donut,
 vertical bars, Docker text"

This reverts commit c9932f275a6dd6c2ce2f5e6cf5980926c5157285.
---
 sidebar.js | 247 --------------------------------------
 style.css  | 339 +++--------------------------------------------------
 2 files changed, 14 insertions(+), 572 deletions(-)

diff --git a/sidebar.js b/sidebar.js
index a624845..4d3df04 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -38,35 +38,10 @@
       menu.appendChild(btn);
     }
 
-    // --- Lock button icon toggle (locked vs unlocked) ---
-    initLockButton();
-
     // --- Search overlay (delayed to wait for search plugin init) ---
     setTimeout(initSearchOverlay, 800);
   }
 
-  function initLockButton() {
-    var lockItem = document.querySelector('.nav-item.LockButton');
-    if (!lockItem) return;
-    var lockLink = lockItem.querySelector('a');
-    if (!lockLink) return;
-
-    // Set initial state based on title
-    function updateLockState() {
-      var title = lockLink.getAttribute('title') || '';
-      if (title.indexOf('Unlock') === 0) {
-        lockItem.classList.add('is-locked');
-      } else {
-        lockItem.classList.remove('is-locked');
-      }
-    }
-    updateLockState();
-
-    // Watch for title attribute changes (Unraid toggles this on click)
-    var observer = new MutationObserver(function() { updateLockState(); });
-    observer.observe(lockLink, { attributes: true, attributeFilter: ['title'] });
-  }
-
   function initSearchOverlay() {
     if (!window.jQuery) return;
 
@@ -344,27 +319,12 @@
     observer.observe(target, { childList: true, subtree: true });
   }
 
-  // Replace Tailscale icon on Dashboard and Settings pages
-  function replaceTailscaleIcon() {
-    var TAILSCALE_SVG = CDN_SVG + '/tailscale-light.svg';
-    // Dashboard: img with alt="Tailscale" inside a card header
-    var imgs = document.querySelectorAll('img[alt="Tailscale"], img[src*="tailscale" i]');
-    imgs.forEach(function(img) {
-      if (img.src !== TAILSCALE_SVG && img.getAttribute('src') !== TAILSCALE_SVG) {
-        img.src = TAILSCALE_SVG;
-        img.removeAttribute('onerror');
-      }
-    });
-  }
-
   // Initialize when DOM is ready
   function initIcons() {
     // Initial replacement
     setTimeout(replaceIcons, 500);
-    setTimeout(replaceTailscaleIcon, 500);
     // Second pass after FolderView finishes its DOM work
     setTimeout(replaceIcons, 2000);
-    setTimeout(replaceTailscaleIcon, 2000);
     // Start watching for future changes
     startObserver();
   }
@@ -375,210 +335,3 @@
     initIcons();
   }
 })();
-
-// =============================================================
-// Pie Chart Recoloring — vibrant theme colors for System card
-// =============================================================
-(function() {
-  'use strict';
-
-  // Map Unraid's muted conic-gradient colors → vibrant theme colors
-  var COLOR_MAP = [
-    // gray-blue used portions → theme accent
-    [/rgb\(96,\s*110,\s*127\)/g, 'rgb(126, 184, 218)'],
-    // near-black unused → subtle light
-    [/rgb\(35,\s*37,\s*35\)/g, 'rgba(255, 255, 255, 0.08)'],
-    // muted orange → vibrant orange
-    [/rgb\(215,\s*126,\s*13\)/g, 'rgb(245, 166, 35)'],
-    // muted yellow → vibrant yellow
-    [/rgb\(212,\s*172,\s*13\)/g, 'rgb(241, 196, 15)'],
-    // muted red → vibrant red-coral
-    [/rgb\(205,\s*92,\s*92\)/g, 'rgb(231, 76, 60)'],
-  ];
-
-  function recolorPie(pie) {
-    var style = pie.getAttribute('style');
-    if (!style || style.indexOf('conic-gradient') === -1) return;
-
-    var newStyle = style;
-    for (var i = 0; i < COLOR_MAP.length; i++) {
-      newStyle = newStyle.replace(COLOR_MAP[i][0], COLOR_MAP[i][1]);
-    }
-
-    if (newStyle !== style) {
-      pie.setAttribute('style', newStyle);
-    }
-  }
-
-  function recolorAll() {
-    var pies = document.querySelectorAll('div.pie');
-    pies.forEach(recolorPie);
-  }
-
-  function startPieObserver() {
-    var pies = document.querySelectorAll('div.pie');
-    if (pies.length === 0) return;
-
-    var observer = new MutationObserver(function(mutations) {
-      for (var i = 0; i < mutations.length; i++) {
-        if (mutations[i].attributeName === 'style') {
-          recolorPie(mutations[i].target);
-        }
-      }
-    });
-
-    pies.forEach(function(pie) {
-      recolorPie(pie);
-      observer.observe(pie, { attributes: true, attributeFilter: ['style'] });
-    });
-  }
-
-  function initPieCharts() {
-    setTimeout(recolorAll, 1000);
-    setTimeout(startPieObserver, 2000);
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initPieCharts);
-  } else {
-    initPieCharts();
-  }
-})();
-
-// =============================================================
-// Vertical Pill Bars — Array/Cache/Unassigned disk utilization
-// =============================================================
-(function() {
-  'use strict';
-
-  function convertBar(bar) {
-    // Skip bars with no data or already converted
-    if (bar.classList.contains('none') || bar.classList.contains('vertical-bar')) return;
-
-    var fill = bar.querySelector('span:first-child');
-    if (!fill) return;
-
-    // Read width (e.g. "83%") and convert to height
-    var w = fill.style.width;
-    if (w) {
-      fill.style.height = w;
-      fill.style.width = '100%';
-    }
-
-    // Copy % text from sibling .load span into bar's last span
-    var parent = bar.parentElement;
-    if (parent) {
-      var loadSpan = parent.querySelector('.load');
-      var textSpan = bar.querySelector('span:last-child');
-      if (loadSpan && textSpan && textSpan !== fill) {
-        textSpan.textContent = loadSpan.textContent.trim();
-      }
-    }
-
-    bar.classList.add('vertical-bar');
-  }
-
-  function convertAllBars(container) {
-    var bars = container.querySelectorAll('.usage-disk');
-    bars.forEach(convertBar);
-  }
-
-  function initVerticalBars() {
-    var tbodyIds = ['array_list', 'pool_list0', 'devs_list'];
-    var targets = [];
-
-    tbodyIds.forEach(function(id) {
-      var el = document.getElementById(id);
-      if (el) {
-        targets.push(el);
-        convertAllBars(el);
-      }
-    });
-
-    if (targets.length === 0) return;
-
-    // Watch for style changes (Unraid updates bar widths) and childList (dynamic adds)
-    var observer = new MutationObserver(function(mutations) {
-      mutations.forEach(function(m) {
-        var tbody = m.target.closest ? m.target.closest('tbody') : null;
-        if (!tbody) tbody = m.target;
-        // Reconvert: remove vertical-bar class from affected bars, then reconvert
-        var bars = tbody.querySelectorAll('.usage-disk');
-        bars.forEach(function(bar) {
-          if (bar.classList.contains('vertical-bar')) {
-            bar.classList.remove('vertical-bar');
-          }
-          convertBar(bar);
-        });
-      });
-    });
-
-    targets.forEach(function(el) {
-      observer.observe(el, { attributes: true, attributeFilter: ['style'], subtree: true, childList: true });
-    });
-  }
-
-  function init() {
-    setTimeout(initVerticalBars, 1500);
-    // Second pass for late-loading content
-    setTimeout(initVerticalBars, 3000);
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
-
-// =============================================================
-// System Card Legend Colors — fix invisible legend circles
-// =============================================================
-(function() {
-  'use strict';
-
-  // Legend circle colors matching recolored pie segments (in DOM order)
-  var LEGEND_COLORS = [
-    'rgb(126, 184, 218)',    // System — accent blue
-    'rgb(245, 166, 35)',     // VM — orange
-    'rgb(241, 196, 15)',     // ZFS cache — yellow
-    'rgb(231, 76, 60)',      // Docker — red
-    'rgba(255, 255, 255, 0.3)' // Free — subtle white
-  ];
-
-  function colorLegend() {
-    var dynamic = document.getElementById('dynamic');
-    if (!dynamic) return;
-
-    var circles = dynamic.querySelectorAll('i.fa-circle');
-    circles.forEach(function(circle, i) {
-      if (i < LEGEND_COLORS.length) {
-        circle.style.setProperty('color', LEGEND_COLORS[i], 'important');
-      }
-    });
-  }
-
-  function initLegendColors() {
-    var dynamic = document.getElementById('dynamic');
-    if (!dynamic) return;
-
-    colorLegend();
-
-    // Re-apply when Unraid re-renders the system card
-    var observer = new MutationObserver(function() {
-      colorLegend();
-    });
-    observer.observe(dynamic, { childList: true, subtree: true });
-  }
-
-  function init() {
-    setTimeout(initLegendColors, 2000);
-    setTimeout(colorLegend, 4000);
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
diff --git a/style.css b/style.css
index fc92b17..a7a26a1 100644
--- a/style.css
+++ b/style.css
@@ -49,10 +49,6 @@
 /* ============================================
    BACKGROUND: Mountain Wallpaper
    ============================================ */
-html {
-  overflow-x: hidden !important;
-}
-
 body {
   background: #0a0a0f !important;
   background-image: url('/custom/wallpaper.jpg') !important;
@@ -189,14 +185,13 @@ html.sidebar-expanded #sidebar-toggle-btn {
   width: 36px !important;
   height: 36px !important;
   box-sizing: border-box !important;
-  background: transparent !important;
-  border: none !important;
-  border-radius: 50% !important;
+  background: rgba(255, 255, 255, 0.06) !important;
+  border: 1px solid rgba(255, 255, 255, 0.10) !important;
 }
 
 html.sidebar-expanded #sidebar-toggle-btn:hover {
-  background: rgba(255, 255, 255, 0.08) !important;
-  border: none !important;
+  background: rgba(255, 255, 255, 0.12) !important;
+  border-color: rgba(255, 255, 255, 0.20) !important;
 }
 
 html.sidebar-expanded #sidebar-toggle-btn svg {
@@ -328,7 +323,6 @@ html.sidebar-expanded #sidebar-toggle-btn svg {
 .Theme--sidebar .nav-item.LogButton a:before { content: "\f0f6" !important; }
 .Theme--sidebar .nav-item.HelpButton a:before { content: "\f059" !important; }
 .Theme--sidebar .nav-item.LockButton a:before { content: "\f09c" !important; font-family: FontAwesome !important; }
-.Theme--sidebar .nav-item.LockButton.is-locked a:before { content: "\f023" !important; }
 
 /* --- EXPANDED SIDEBAR ---
    Compound selectors: both classes on <html> */
@@ -388,7 +382,6 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
 }
 
 /* --- Content area shifts for sidebar (push, not overlap) --- */
-#header,
 #displaybox,
 #footer,
 #copyright {
@@ -396,7 +389,6 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
   transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-html.sidebar-expanded.Theme--sidebar #header,
 html.sidebar-expanded.Theme--sidebar #displaybox,
 html.sidebar-expanded.Theme--sidebar #footer,
 html.sidebar-expanded.Theme--sidebar #copyright {
@@ -951,18 +943,6 @@ table.dashboard {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-}
-
-/* Ensure no dark backgrounds between dashboard cards */
-table.dashboard > tbody:not(.sortable),
-table.dashboard > thead {
-  background: transparent !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-  border: none !important;
-  box-shadow: none !important;
 }
 
 /* Hide colgroup (not needed with block layout) */
@@ -980,7 +960,7 @@ table.dashboard > tbody.sortable {
   border-radius: var(--glass-radius) !important;
   box-shadow: var(--glass-shadow) !important;
   margin-bottom: 20px !important;
-  padding-bottom: 14px !important;
+  padding-bottom: 8px !important;
   overflow: hidden !important;
   position: relative;
   transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
@@ -1061,44 +1041,6 @@ span.tile-header-left {
   flex: 1 !important;
 }
 
-/* Dashboard card control icons — transparent background, white only */
-span.tile-header-right > * {
-  background: transparent !important;
-  border: none !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-  box-shadow: none !important;
-  color: rgba(255, 255, 255, 0.7) !important;
-  font-size: 2rem !important;
-  padding: 0 !important;
-  line-height: 1 !important;
-}
-
-span.tile-header-right > *:hover {
-  color: rgba(255, 255, 255, 0.95) !important;
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-/* Nested control icons (gear, chevron) inside tile-header-right-controls */
-span.tile-header-right .control,
-span.tile-header-right-controls a {
-  background: transparent !important;
-  border: none !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-  box-shadow: none !important;
-  color: rgba(255, 255, 255, 0.7) !important;
-  font-size: 2rem !important;
-  padding: 0 !important;
-}
-
-span.tile-header-right .control:hover,
-span.tile-header-right-controls a:hover {
-  color: rgba(255, 255, 255, 0.95) !important;
-  background: transparent !important;
-}
-
 /* Stopgap spacers → hidden (card margins handle spacing) */
 table.dashboard > thead.stopgap {
   display: none !important;
@@ -1109,8 +1051,7 @@ table.dashboard .usage-disk,
 table.dashboard .usage-bar {
   background: rgba(255, 255, 255, 0.08) !important;
   border-radius: 8px !important;
-  height: 8px !important;
-  margin: 6px 0 !important;
+  height: 6px !important;
   overflow: hidden !important;
 }
 
@@ -1121,113 +1062,6 @@ table.dashboard .usage-bar > span {
   height: 100% !important;
 }
 
-/* --- Dashboard CPU bars — override inner-page pill style (specificity 1-1-1 > 1-1-0) --- */
-#displaybox table.dashboard .usage-disk {
-  display: block !important;
-  width: 100% !important;
-  height: 10px !important;
-  min-width: unset !important;
-  border-radius: 5px !important;
-  margin: 4px 0 !important;
-  position: relative !important;
-}
-
-#displaybox table.dashboard .usage-disk > span:first-child {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  display: block !important;
-  border-radius: 5px !important;
-}
-
-/* Color-coded CPU bar fills */
-#displaybox table.dashboard .usage-disk > span.greenbar {
-  background: linear-gradient(90deg, rgba(74, 222, 128, 0.6), #4ade80) !important;
-}
-
-#displaybox table.dashboard .usage-disk > span.orangebar {
-  background: linear-gradient(90deg, rgba(245, 166, 35, 0.6), rgb(245, 166, 35)) !important;
-}
-
-#displaybox table.dashboard .usage-disk > span.redbar {
-  background: linear-gradient(90deg, rgba(231, 76, 60, 0.6), rgb(231, 76, 60)) !important;
-}
-
-/* Hide empty pill label text inside dashboard bars */
-#displaybox table.dashboard .usage-disk > span:last-child {
-  font-size: 0 !important;
-  padding: 0 !important;
-  position: absolute !important;
-}
-
-/* --- Array/Cache/Unassigned — Vertical Pill Bars (specificity 1-2-1) --- */
-#displaybox table.dashboard .usage-disk.vertical-bar {
-  width: 28px !important;
-  height: 50px !important;
-  border-radius: 14px !important;
-  position: relative !important;
-  display: block !important;
-  min-width: unset !important;
-  background: rgba(255, 255, 255, 0.06) !important;
-  border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  margin: 0 auto !important;
-  overflow: hidden !important;
-}
-
-/* Vertical fill — from bottom */
-#displaybox table.dashboard .usage-disk.vertical-bar > span:first-child {
-  position: absolute !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  border-radius: 14px !important;
-  top: auto !important;
-}
-
-/* Vertical color gradients (bottom to top) */
-#displaybox table.dashboard .usage-disk.vertical-bar > span.greenbar {
-  background: linear-gradient(0deg, rgba(74, 222, 128, 0.5), #4ade80) !important;
-}
-
-#displaybox table.dashboard .usage-disk.vertical-bar > span.orangebar {
-  background: linear-gradient(0deg, rgba(245, 166, 35, 0.5), rgb(245, 166, 35)) !important;
-}
-
-#displaybox table.dashboard .usage-disk.vertical-bar > span.redbar {
-  background: linear-gradient(0deg, rgba(231, 76, 60, 0.5), rgb(231, 76, 60)) !important;
-}
-
-/* % text inside vertical bar */
-#displaybox table.dashboard .usage-disk.vertical-bar > span:last-child {
-  position: absolute !important;
-  top: 2px !important;
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  font-size: 0.65em !important;
-  white-space: nowrap !important;
-  color: white !important;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
-  padding: 0 !important;
-  z-index: 1 !important;
-}
-
-/* Hide .load text outside vertical bars */
-#array_list .w18 .load,
-#pool_list0 .w18 .load,
-#devs_list .w18 .load {
-  display: none !important;
-}
-
-/* Center the vertical bar in its cell */
-#array_list .w18:last-child,
-#pool_list0 .w18:last-child,
-#devs_list .w18:last-child {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
 /* Docker container icons in dashboard */
 table.dashboard img {
   border-radius: 6px !important;
@@ -1271,102 +1105,19 @@ table.dashboard span.inner span.state {
   font-size: 0.85em !important;
 }
 
-/* Docker/VM container name links — use accent color */
+/* Docker/VM container name links — use accent color (clock color) */
 table.dashboard span.inner a,
 table.dashboard span.outer a,
-table.dashboard span.appname a,
 table.dashboard td a {
   color: var(--glass-accent) !important;
 }
 
 table.dashboard span.inner a:hover,
 table.dashboard span.outer a:hover,
-table.dashboard span.appname a:hover,
 table.dashboard td a:hover {
   color: var(--glass-accent-hover) !important;
 }
 
-/* Docker card — force all text/links to white (FolderView sets blue on some spans) */
-#docker_view span.inner span,
-#docker_view span.inner a,
-#docker_view a {
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-/* --- CPU Chart Canvas — invert grid lines to white --- */
-#cpuchart {
-  filter: invert(1) hue-rotate(180deg) !important;
-  opacity: 0.85 !important;
-}
-
-/* CPU chart row — force full width (TD has no .w26/.w72 spans) */
-#cpu_chart td {
-  display: block !important;
-  width: 100% !important;
-  padding: 8px 0 !important;
-}
-
-#cpu_chart td canvas {
-  display: block !important;
-  width: 100% !important;
-  min-height: 96px !important;
-}
-
-/* --- System Card Donut Charts --- */
-div.pie {
-  position: relative !important;
-}
-
-/* Create donut hole — thinner ring, fully opaque center */
-div.pie::after {
-  content: '' !important;
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-  width: 78% !important;
-  height: 78% !important;
-  border-radius: 50% !important;
-  background: rgb(15, 15, 25) !important;
-}
-
-/* Ensure text labels are above the donut hole */
-div.pie > span {
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-/* --- Toggle Switch — Glass Style --- */
-.switch-button-background {
-  width: 40px !important;
-  height: 22px !important;
-  background: rgba(255, 255, 255, 0.10) !important;
-  border: 1px solid rgba(255, 255, 255, 0.15) !important;
-  border-radius: 11px !important;
-  position: relative !important;
-  display: inline-block !important;
-  vertical-align: middle !important;
-  cursor: pointer !important;
-  transition: background 0.2s ease !important;
-}
-
-.switch-button-background.checked {
-  background: rgba(126, 184, 218, 0.3) !important;
-  border-color: rgba(126, 184, 218, 0.4) !important;
-}
-
-.switch-button-button {
-  width: 18px !important;
-  height: 18px !important;
-  border-radius: 50% !important;
-  background: rgba(255, 255, 255, 0.6) !important;
-  position: absolute !important;
-  top: 50% !important;
-  transform: translateY(-50%) !important;
-  transition: left 0.2s ease !important;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
-}
-
 
 /* ============================================
    INNER PAGES — Content Glass Wrapper
@@ -1400,7 +1151,7 @@ html.sidebar-expanded.Theme--sidebar #displaybox {
 nav.tabs {
   background: transparent !important;
   padding: 0 0 12px !important;
-  margin-bottom: 8px !important;
+  margin-bottom: 16px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
   display: flex !important;
   gap: 6px !important;
@@ -1418,7 +1169,6 @@ nav.tabs button {
   backdrop-filter: blur(10px) !important;
   -webkit-backdrop-filter: blur(10px) !important;
   transition: all 0.2s ease !important;
-  opacity: 1 !important;
 }
 
 nav.tabs button:hover {
@@ -1510,23 +1260,11 @@ div.tab[aria-selected="true"] {
 
 #displaybox table:not(.dashboard) tbody td {
   color: var(--glass-text) !important;
-  padding: 14px 16px !important;
+  padding: 10px 16px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
   background: transparent !important;
 }
 
-/* Header rows using <td> instead of <th> (Main/Pool/ZFS pages) */
-#displaybox table:not(.dashboard) thead td,
-#displaybox table:not(.dashboard) tbody tr:first-child td {
-  color: var(--glass-text-muted) !important;
-  font-weight: 500 !important;
-  text-transform: uppercase !important;
-  font-size: 0.75em !important;
-  letter-spacing: 0.5px !important;
-  padding: 12px 16px !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
-}
-
 #displaybox table:not(.dashboard) tbody tr:hover {
   background: rgba(255, 255, 255, 0.04) !important;
 }
@@ -1535,60 +1273,6 @@ div.tab[aria-selected="true"] {
   border-bottom: none !important;
 }
 
-/* White icons inside tables (sort arrows, action icons, snapshots) */
-#displaybox table i.fa,
-#displaybox table .fa,
-#displaybox table i[class*="icon-"] {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-
-/* Toggle icon between tabs and table */
-i.toggle.fa {
-  color: rgba(255, 255, 255, 0.5) !important;
-  font-size: 16px !important;
-}
-
-/* Usage bars on inner pages — larger pill-style with separated text */
-#displaybox .usage-disk {
-  height: 26px !important;
-  min-width: 80px !important;
-  border-radius: 13px !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  position: relative !important;
-}
-
-#displaybox .usage-disk > span.orangebar,
-#displaybox .usage-disk > span.greenbar {
-  border-radius: 13px !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-}
-
-#displaybox .usage-disk > span:last-child {
-  position: relative !important;
-  z-index: 1 !important;
-  font-size: 0.8em !important;
-  font-weight: 500 !important;
-  padding: 0 10px !important;
-  white-space: nowrap !important;
-  color: var(--glass-text) !important;
-}
-
-/* Tooltip styling (custom tooltips) */
-.tipsy .tipsy-inner {
-  background: rgba(15, 15, 25, 0.85) !important;
-  backdrop-filter: blur(30px) !important;
-  -webkit-backdrop-filter: blur(30px) !important;
-  border: 1px solid var(--glass-border) !important;
-  border-radius: 8px !important;
-  color: var(--glass-text) !important;
-  font-size: 12px !important;
-  padding: 6px 10px !important;
-}
-
 
 /* ============================================
    SETTINGS PAGES — Icon Grid
@@ -1939,6 +1623,11 @@ div.clone-settings {
   background: transparent !important;
 }
 
+/* Checkbox / switch styling */
+.switch-button-background {
+  border-radius: 12px !important;
+}
+
 /* Selection color */
 ::selection {
   background: rgba(126, 184, 218, 0.3);