refactor(waybar): reorganize top bar with groups and add new modules

- config_top.jsonc:
  - Group modules into traygroup, pomodorogroup, bench, general
  - Add weather, language, CPU, memory, temperature modules with icons and states
  - Add pomodoro preset buttons (10m,20m,30m,1h,1h30m)
  - Split battery into #watt (power draw) and #charge (charge level)
  - Add invisible separators for spacing
- config_bottom.jsonc:
  - Remove unused modules from left/right, add margin-top
- style_top.css:
  - Style new groups and modules, define state-based colors for CPU/memory/temperature
  - Add hover effects and critical animation for paused pomodoro
- style_bottom.css:
  - Style minimized taskbar buttons
  - Fix side panel group selector (use #group)

waybar/style/style_bottom.css

@@ -122,6 +122,10 @@ window#waybar.chromium {
     min-height: 20px;
 }
 
+#taskbar button.minimized {
+    color: alpha(@accent, 0.5);
+}
+
 #taskbar.empty {
     padding: 0;
 }
@@ -158,7 +162,7 @@ window#waybar.chromium {
 /* --------------------------------------------------------------------------
    SIDE PANEL GROUPS
    -------------------------------------------------------------------------- */
-.modules-left, .modules-right {
+#group {
   /* Layout & Box Model */
   border: 1px solid @border-color;
   border-radius: 15px;

waybar/style/style_top.css

@@ -46,19 +46,27 @@ window#waybar.chromium {
 #mpd,
 #mpris,
 #custom-pomodoro,
+#custom-weather,
 #clock,
 #battery,
 #network,
 #pulseaudio,
 #pulseaudio-slider,
-#custom-separator,
 #scratchpad,
+#language,
+#cpu,
+#memory,
+#temperature,
 #tray {
   padding: 0 10px;
   color: @text-primary;
   transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
 }
 
+#custom-separator-invisible {
+    padding: 0 30px;
+}
+
 /* --------------------------------------------------------------------------
    WORKSPACES
    -------------------------------------------------------------------------- */
@@ -124,13 +132,51 @@ window#waybar.chromium {
   text-shadow: 0px 0px 8px @text-primary;
 }
 
+/* --------------------------------------------------------------------------
+   BATTERY
+   -------------------------------------------------------------------------- */
+#language {
+    padding-right: 0;
+    padding-left: 12px;
+}
+
+/* --------------------------------------------------------------------------
+   BATTERY
+   -------------------------------------------------------------------------- */
+#battery.watt {
+    padding-right: 0;
+}
+
+/* --------------------------------------------------------------------------
+   CPU
+   -------------------------------------------------------------------------- */
+#cpu {
+    font-size: 20px;
+}
+
+/* --------------------------------------------------------------------------
+   MEMORY
+   -------------------------------------------------------------------------- */
+#memory {
+    font-size: 20px;
+    padding: 0;
+}
+
+/* --------------------------------------------------------------------------
+   TEMPERATURE
+   -------------------------------------------------------------------------- */
+#temperature {
+    font-size: 20px;
+}
+
 /* --------------------------------------------------------------------------
    SIDE PANEL GROUPS
    -------------------------------------------------------------------------- */
-#mpd, #mpris, #workspaces, .modules-right {
+#general, #bench, #workspaces, #mpd, #traygroup, #custom-weather, #pomodorogroup {
   /* Layout & Box Model */
   border: 1px solid @border-color;
   border-radius: 15px;
+  margin: 2.5px;
    
   /* Colors */
   background-color: @bg-panel;
@@ -176,17 +222,22 @@ window#waybar.chromium {
    CUSTOM MODULES
    -------------------------------------------------------------------------- */
 #custom-pomodoro {
-  color: @text-secondary;
+  color: @text-primary;
   border-radius: 0 0 10px 10px;
 }
 
+#pomodorogroup .drawer-child * {
+    color: @text-primary;
+    margin-right: 10px;
+}
+
 /* --------------------------------------------------------------------------
    STATE-BASED STYLES
    -------------------------------------------------------------------------- */
 
 /* POMODORO STATES */
 #custom-pomodoro.work {
-  color: @accent;
+  color: @attention;
 }
 
 #custom-pomodoro.break {
@@ -195,8 +246,7 @@ window#waybar.chromium {
 }
 
 #custom-pomodoro.pause {
-  color: @attention;
-  text-shadow: 0px 0px 4px @attention;
+  animation: critical 0.5s 50;
 }
 
 /* MPD STATES */
@@ -219,29 +269,59 @@ window#waybar.chromium {
 
 #mpd.paused, #mpris.paused {
   font-weight: normal;
-  color: @text-secondary;
+  color: @text-primary;
 }
 
 /* BATTERY STATES */
-#battery.charging,
-#battery.plugged {
+#battery.charge.charging,
+#battery.charge.plugged {
   color: @success;
   text-shadow: 0px 0px 8px @success;
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
-#battery.warning:not(.charging) {
+#battery.charge.warning:not(.charging) {
   color: @warning;
   text-shadow: 0px 0px 8px @warning;
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
-#battery.critical:not(.charging) {
+#battery.charge.critical:not(.charging) {
   color: @danger;
   text-shadow: 0px 0px 8px @danger;
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
+/* CPU && MEMORY STATES */
+#cpu.s1, #memory.s1, #temperature.s1 {
+  color: @text-primary;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s2, #memory.s2 {
+  color: @text-primary;
+  text-shadow: 0px 0px 2px @text-primary;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s3, #memory.s3 {
+  color: @attention;
+  text-shadow: 0px 0px 2px @attention;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s4, #memory.s4, #temperature.warning {
+  color: @warning;
+  text-shadow: 0px 0px 2px @warning;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s5, #memory.s5, #temperature.critical {
+  color: @danger;
+  text-shadow: 0px 0px 2px @danger;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
 /* --------------------------------------------------------------------------
    HOVER EFFECTS
    -------------------------------------------------------------------------- */
@@ -254,7 +334,10 @@ window#waybar.chromium {
 #network:hover,
 #pulseaudio:hover,
 #custom-pomodoro:hover,
+#custom-weather:hover,
 #scratchpad:hover,
+#language:hover,
+#pomodorogroup .drawer-child *:hover,
 #tray:hover {
   color: @accent;
   text-shadow: 0px 0px 8px @accent;
@@ -270,10 +353,6 @@ window#waybar.chromium {
 /* --------------------------------------------------------------------------
    LAYOUT UTILITIES
    -------------------------------------------------------------------------- */
-#window,
-#workspaces {
-  margin: 0 2.5px;
-}
 
 .modules-left > widget:first-child > #workspaces {
   margin-left: 0;
@@ -290,3 +369,18 @@ window#waybar.chromium {
     0% { color: @text-primary; }
     100% { color: @accent; }
 }
+
+@keyframes critical {
+    0% {
+        color: @attention;
+        text-shadow: 0px 0px 8px @attention;
+    }
+    50% {
+        color: @accent;
+        text-shadow: 0px 0px 8px @accent;
+    }
+    100% {
+        color: @attention;
+        text-shadow: 0px 0px 8px @attention;
+    }
+}